@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .video-container {
    @apply relative aspect-video rounded-lg overflow-hidden shadow-lg border border-gray-200;
  }
  .status-badge {
    @apply px-3 py-1 rounded-full text-sm font-medium transition-all duration-300;
  }
  .info-card {
    @apply bg-white rounded-xl shadow-md p-4 border border-gray-100 transition-all hover:shadow-lg;
  }
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-opacity-50;
  }
  .btn-primary {
    @apply bg-primary text-white hover:bg-primary/90 focus:ring-primary;
  }
  .btn-secondary {
    @apply bg-secondary text-white hover:bg-secondary/90 focus:ring-secondary;
  }
  .btn-danger {
    @apply bg-danger text-white hover:bg-danger/90 focus:ring-danger;
  }
  .btn-outline {
    @apply border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-200;
  }
  .pulse-animation {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
}

/* Tailwind配置 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

:root {
  --primary: #3B82F6;
  --secondary: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;
  --dark: #1F2937;
  --light: #F3F4F6;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}