frontend/src/index.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* 全局样式 */
@layer base {
  :root {
    /* 主题色 */
    --color-primary: #10b981;
    --color-primary-light: #d1fae5;
    --color-secondary: #f97316;
    --color-secondary-light: #fed7aa;
    --color-tertiary: #8b5cf6;
    --color-tertiary-light: #ddd6fe;
    --color-accent: #14b8a6;
    --color-accent-light: #ccfbf1;
    --color-danger: #f43f5e;
    --color-danger-light: #fecdd3;

    /* 中性色 */
    --color-neutral-50: #fafbfc;
    --color-neutral-100: #f3f4f6;
    --color-neutral-200: #e5e7eb;
    --color-neutral-300: #d1d5db;
    --color-neutral-400: #9ca3af;
    --color-neutral-500: #6b7280;
    --color-neutral-600: #4b5563;
    --color-neutral-700: #374151;
    --color-neutral-800: #1f2937;
    --color-neutral-900: #111827;

    /* 阴影 */
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background-color: var(--color-neutral-50);
    color: var(--color-neutral-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

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

  ::-webkit-scrollbar-track {
    background: var(--color-neutral-100);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--color-neutral-400);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-500);
  }
}

/* 卡片样式 */
@layer components {
  .card {
    @apply bg-white rounded-lg p-6 transition-all duration-300;
    box-shadow: var(--shadow-soft);
  }

  .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
  }

  /* 按钮基础样式 */
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-300 inline-flex items-center justify-center;
  }

  .btn-primary {
    @apply bg-primary text-white hover:bg-primary/90;
  }

  .btn-secondary {
    @apply bg-secondary text-white hover:bg-secondary/90;
  }

  .btn-tertiary {
    @apply bg-tertiary text-white hover:bg-tertiary/90;
  }

  .btn-outline {
    @apply border-2 border-primary text-primary hover:bg-primary hover:text-white;
  }

  /* 浮动背景球 */
  .floating-ball {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    animation: float 20s ease-in-out infinite;
    pointer-events: none;
  }

  .floating-ball-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    top: -150px;
    left: -150px;
  }

  .floating-ball-2 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-tertiary));
    bottom: -200px;
    right: -200px;
    animation-delay: 5s;
  }

  .floating-ball-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, var(--color-tertiary), var(--color-primary));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
  }

  /* 加载动画 */
  .loading-spinner {
    @apply inline-block w-8 h-8 border-4 border-primary border-t-transparent rounded-full;
    animation: spin 1s linear infinite;
  }
}

/* 动画 */
@layer utilities {
  @keyframes float {
    0%, 100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -30px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

/* Ant Design 覆盖 */
.ant-btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.ant-btn-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 0.9;
}

.ant-menu-item-selected {
  color: var(--color-primary) !important;
}

.ant-menu-item-selected::after {
  border-color: var(--color-primary) !important;
}