/* 自定义动画样式 */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideIn {
  0% { 
    transform: translateY(-10px); 
    opacity: 0; 
  }
  100% { 
    transform: translateY(0); 
    opacity: 1; 
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

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

.animate-slide-in {
  animation: slideIn 0.3s ease-out;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* 错误消息样式 */
.error-message {
  @apply text-red-600 text-sm;
}

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

.error-message.animate-slide-in {
  animation: slideIn 0.3s ease-out;
}

/* 表单验证样式 */
.form-error {
  @apply border-red-300 bg-red-50;
}

.form-error:focus {
  @apply ring-red-500 border-red-500;
}

/* 成功消息样式 */
.success-message {
  @apply text-green-600 bg-green-50 border border-green-200 rounded-lg p-3;
}

/* 加载动画增强 */
.loading-spinner {
  @apply animate-spin rounded-full border-b-2 border-blue-600;
}

/* 按钮悬停效果 */
.btn-hover-scale {
  @apply transition-transform duration-200 hover:scale-105;
}

/* 卡片悬停效果 */
.card-hover {
  @apply transition-all duration-300 hover:shadow-lg hover:scale-102;
}

.scale-102 {
  transform: scale(1.02);
}

/* 渐变背景 */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 毛玻璃效果 */
.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8);
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .glass-effect {
    background: rgba(0, 0, 0, 0.8);
  }
}