/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background-color: #f9fafb;
  color: #1e293b;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 颜色变量（对应原Tailwind配置） */
:root {
  --primary: #165DFF;
  --secondary: #36CFFB;
  --dark: #1E293B;
  --light: #F8FAFC;
  --accent: #FF7D00;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-800: #1f2937;
  --red-50: #fef2f2;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
}

/* 工具类样式 */
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-gray-50 { color: var(--gray-50); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-800 { color: var(--gray-800); }
.text-red-500 { color: var(--red-500); }
.text-red-600 { color: var(--red-600); }
.text-red-700 { color: var(--red-700); }

.bg-primary { background-color: var(--primary); }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-red-50 { background-color: var(--red-50); }
.bg-white { background-color: white; }

.border { border: 1px solid; }
.border-gray-200 { border-color: var(--gray-200); }
.border-red-500 { border-color: var(--red-500); }
.border-l-4 { border-left-width: 4px; }

.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.ml-3 { margin-left: 0.75rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }

.flex { display: flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.flex-shrink-0 { flex-shrink: 0; }

.text-center { text-align: center; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.leading-relaxed { line-height: 1.625; }

.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.card-shadow { box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.1); }

.transition-shadow { transition-property: box-shadow; }
.transition-opacity { transition-property: opacity; }
.duration-300 { transition-duration: 300ms; }

.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.hover\:opacity-90:hover { opacity: 0.9; }
.hover\:text-primary:hover { color: var(--primary); }
.hover\:text-primary\/80:hover { color: rgba(22, 93, 255, 0.8); }

.cursor-pointer { cursor: pointer; }
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* 自定义样式 */
.bg-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.text-glow {
  text-shadow: 0 0 10px rgba(54, 207, 251, 0.5);
}

.animate-spin {
  animation: spin 1s linear infinite;
}

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

/* 响应式布局 */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 图片样式 */
.object-cover { object-fit: cover; }
.w-full { width: 100%; }
.h-32 { height: 8rem; }

/* Lightbox样式冲突修复 */
.lb-container {
  z-index: 9999 !important;
}

/* 文本自适应 */
.text-\[clamp\(1rem\,2vw\,1\.2rem\)\] {
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.text-\[clamp\(1\.8rem\,4vw\,2\.5rem\)\] {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.text-\[clamp\(2rem\,5vw\,3rem\)\] {
  font-size: clamp(2rem, 5vw, 3rem);
}

/* 空白处理 */
.whitespace-pre-line {
  white-space: pre-line;
}