/* 基础样式 */
body {
    background-color: #f8fafc !important;
    color: #111827 !important;
    transition: all 0.3s ease !important;
}

.dark body,
body.dark,
[data-theme="dark"] body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* 主内容区域 */
main {
    background-color: transparent !important;
}

.dark main {
    background-color: transparent !important;
}

/* 标题样式 */
.hero-title {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    color: #111827 !important;
}

.dark .hero-title {
    color: #f9fafb !important;
}

.hero-description {
    font-size: 1.125rem !important;
    max-width: 42rem !important;
    margin: 0 auto !important;
    color: #4b5563 !important;
}

.dark .hero-description {
    color: #d1d5db !important;
}

/* 筛选器样式 */
.filter-title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
    color: #111827 !important;
}

.dark .filter-title {
    color: #f9fafb !important;
}

.filter-container {
    @apply flex flex-wrap gap-3 justify-center;
}

.filter-btn {
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    background-color: #f8fafc !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}

.filter-btn:hover {
    background-color: #f1f5f9 !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

.filter-btn.active {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
    transform: translateY(-1px) !important;
}

.filter-btn.active:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* 暗色模式下的筛选按钮 */
.dark .filter-btn {
    background-color: #374151 !important;
    color: #d1d5db !important;
    border-color: #4b5563 !important;
}

.dark .filter-btn:hover {
    background-color: #4b5563 !important;
    border-color: #6b7280 !important;
    color: #f9fafb !important;
}

.dark .filter-btn.active {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

.dark .filter-btn.active:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* 主题切换按钮 */
.theme-toggle-btn {
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s !important;
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
}

.theme-toggle-btn:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
}

.dark .theme-toggle-btn {
    background-color: #374151 !important;
    color: #d1d5db !important;
}

.dark .theme-toggle-btn:hover {
    background-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* 导航样式 */
header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.dark header {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-bottom-color: #374151 !important;
}

.nav-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: colors 0.2s !important;
    color: #4b5563 !important;
}

.nav-link:hover {
    color: #111827 !important;
}

.dark .nav-link {
    color: #d1d5db !important;
}

.dark .nav-link:hover {
    color: #f9fafb !important;
}

/* 导航栏标题 */
.dark header h1 {
    color: #f9fafb !important;
}

.dark header span {
    color: #d1d5db !important;
}

.mobile-nav-link {
    @apply block px-3 py-2 text-sm font-medium transition-colors duration-200;
    @apply text-gray-600 hover:text-gray-900;
    @apply dark:text-gray-300 dark:hover:text-gray-100;
}

.mobile-menu {
    @apply hidden md:hidden border-t transition-all duration-300 ease-in-out;
    @apply bg-white border-gray-200;
    @apply dark:bg-slate-900 dark:border-slate-700;
}

/* 页脚样式 */
footer {
    @apply bg-white border-t border-gray-200;
    @apply dark:bg-slate-900 dark:border-slate-700;
}

/* 空状态样式 */
.empty-state {
    @apply text-center py-16 text-gray-500 dark:text-gray-400;
}

.empty-state-icon {
    @apply w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600;
}

.empty-state-title {
    @apply text-xl font-semibold mb-2 text-gray-700 dark:text-gray-300;
}

.empty-state-description {
    @apply text-gray-500 dark:text-gray-400;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .hero-title {
        @apply text-3xl;
    }
    
    .hero-description {
        @apply text-base;
    }
    
    .filter-container {
        @apply gap-2;
    }
    
    .filter-btn {
        @apply px-3 py-1.5 text-xs;
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-card {
    animation: fadeIn 0.3s ease-out;
}

/* 文本截断 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}