/* Tailwind CSS 基础导入 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义样式 */

/* 动画效果 */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* 卡片悬停效果 */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 按钮样式 */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded-lg transition-colors;
}

.btn-secondary {
  @apply bg-gray-600 hover:bg-gray-700 text-white font-medium px-4 py-2 rounded-lg transition-colors;
}

.btn-danger {
  @apply bg-red-600 hover:bg-red-700 text-white font-medium px-4 py-2 rounded-lg transition-colors;
}

/* 输入框样式 */
.input-field {
  @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
  
  h1 {
    @apply text-2xl;
  }
  
  h2 {
    @apply text-xl;
  }
  
  .grid-cols-1 md:grid-cols-2 lg:grid-cols-3 {
    @apply grid-cols-1;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .grid-cols-1 md:grid-cols-2 lg:grid-cols-3 {
    @apply grid-cols-2;
  }
}

/* 深色模式调整 */
.dark .card {
  @apply bg-gray-800 border-gray-700;
}

.dark .btn-primary {
  @apply bg-blue-700 hover:bg-blue-800;
}

.dark .input-field {
  @apply border-gray-600 bg-gray-700;
}

/* 加载状态 */
.loading-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-600;
}

/* 心脏跳动动画 */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

.animate-heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* 悬浮微信按钮样式 - 确保覆盖所有其他样式 */
#floating-wechat-btn button {
  background-color: #07C160 !important;
  color: white !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.3s ease !important;
  animation: heartbeat 1.5s ease-in-out infinite !important;
}

#floating-wechat-btn button:hover {
  background-color: #05964a !important;
}

#floating-wechat-btn button i {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  color: white !important;
}

/* 确保微信图标正确显示 */
#floating-wechat-btn button i::before {
  content: "\f1d7" !important;
}

/* 提示信息 */
.toast {
  @apply px-4 py-3 rounded-lg shadow-lg flex items-center justify-between mb-2 animate-fade-in;
}

.toast-success {
  @apply bg-green-500 text-white;
}

.toast-error {
  @apply bg-red-500 text-white;
}

.toast-info {
  @apply bg-blue-500 text-white;
}

.toast-warning {
  @apply bg-yellow-500 text-white;
}

/* 模态框 */
.modal {
  @apply fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center;
}

.modal-content {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 max-w-md w-full mx-4;
}

/* 导航菜单 */
.nav-link {
  @apply px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
}

.nav-link.active {
  @apply bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200;
}

/* 搜索框 */
.search-input {
  @apply w-full px-4 py-2 pl-10 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700;
}

/* 标签 */
.tag {
  @apply bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm;
}

/* 卡片 */
.card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden transition-transform hover:scale-105;
}

/* 响应式导航 */
.mobile-nav {
  @apply md:hidden;
}

.desktop-nav {
  @apply hidden md:flex;
}

/* 内容区域 */
.content-area {
  @apply container mx-auto px-4 py-6;
}

/* 页脚 */
.footer {
  @apply bg-white dark:bg-gray-800 shadow-inner mt-12 py-8;
}

/* 头部 */
.header {
  @apply sticky top-0 z-40 bg-white dark:bg-gray-800 shadow-md;
}

/* 英雄区域 */
.hero-section {
  @apply bg-gradient-to-r from-blue-600 to-purple-600 text-white py-16 mb-12 rounded-xl;
}

/* 分类导航 */
.category-nav {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-8;
}

/* 列表页面 */
.list-page {
  @apply space-y-6;
}

/* 详情页面 */
.detail-page {
  @apply space-y-6;
}

/* 个人资料页面 */
.profile-page {
  @apply space-y-6;
}

/* 资源页面 */
.resource-page {
  @apply space-y-6;
}