diff --git a/src/views/Concept/components/BreadcrumbNav.js b/src/views/Concept/components/BreadcrumbNav.js
index a8e1acf2..541f8611 100644
--- a/src/views/Concept/components/BreadcrumbNav.js
+++ b/src/views/Concept/components/BreadcrumbNav.js
@@ -16,13 +16,14 @@ import {
     Flex,
     Tooltip,
 } from '@chakra-ui/react';
-import { ChevronRightIcon, CloseIcon } from '@chakra-ui/icons';
-import { FaLayerGroup, FaFilter, FaTimes, FaHome } from 'react-icons/fa';
+import { ChevronRightIcon } from '@chakra-ui/icons';
+import { FaFilter, FaTimes, FaHome } from 'react-icons/fa';
 
 const BreadcrumbNav = ({
     filter,
     onClearFilter,
     onNavigate,
+    isDarkMode = false,
 }) => {
     // 如果没有筛选条件，不显示
     if (!filter || (!filter.lv1 && !filter.lv2 && !filter.lv3)) {
@@ -56,14 +57,71 @@ const BreadcrumbNav = ({
         });
     }
 
+    // 深色主题样式
+    const darkStyles = {
+        container: {
+            bg: 'rgba(15, 23, 42, 0.8)',
+            backdropFilter: 'blur(20px)',
+            borderColor: 'whiteAlpha.100',
+        },
+        filterBadge: {
+            bg: 'purple.500',
+            color: 'white',
+        },
+        homeBadge: {
+            bg: 'whiteAlpha.100',
+            color: 'white',
+            _hover: { bg: 'whiteAlpha.200' },
+        },
+        chevron: { color: 'whiteAlpha.400' },
+        crumbBadge: (level, isLast) => ({
+            bg: level === 'lv1' ? 'purple.500' : level === 'lv2' ? 'blue.500' : 'cyan.500',
+            color: 'white',
+        }),
+        clearBtn: {
+            color: 'red.300',
+            _hover: { bg: 'whiteAlpha.100' },
+        },
+        hintText: { color: 'whiteAlpha.500' },
+        linkText: { color: 'purple.300' },
+    };
+
+    // 浅色主题样式
+    const lightStyles = {
+        container: {
+            bg: 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%)',
+            borderColor: 'purple.200',
+        },
+        filterBadge: {
+            bg: 'purple.500',
+            color: 'white',
+        },
+        homeBadge: {
+            colorScheme: 'gray',
+            _hover: { bg: 'gray.200' },
+        },
+        chevron: { color: 'gray.400' },
+        crumbBadge: (level, isLast) => ({
+            colorScheme: level === 'lv1' ? 'purple' : level === 'lv2' ? 'blue' : 'cyan',
+        }),
+        clearBtn: {
+            colorScheme: 'red',
+        },
+        hintText: { color: 'gray.500' },
+        linkText: { color: 'purple.600' },
+    };
+
+    const styles = isDarkMode ? darkStyles : lightStyles;
+
     return (
         <Box
-            bg="linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%)"
+            bg={styles.container.bg}
+            backdropFilter={isDarkMode ? styles.container.backdropFilter : undefined}
             borderRadius="xl"
             p={{ base: 3, md: 4 }}
             mb={4}
             border="1px solid"
-            borderColor="purple.200"
+            borderColor={styles.container.borderColor}
         >
             <Flex
                 align="center"
@@ -75,8 +133,8 @@ const BreadcrumbNav = ({
                     {/* 筛选图标 */}
                     <HStack
                         spacing={2}
-                        bg="purple.500"
-                        color="white"
+                        bg={styles.filterBadge.bg}
+                        color={styles.filterBadge.color}
                         px={3}
                         py={1}
                         borderRadius="full"
@@ -90,15 +148,15 @@ const BreadcrumbNav = ({
                     {/* 首页入口 */}
                     <Tooltip label="返回全部概念" placement="top">
                         <Badge
-                            colorScheme="gray"
+                            {...(isDarkMode ? {} : { colorScheme: 'gray' })}
+                            bg={isDarkMode ? styles.homeBadge.bg : undefined}
+                            color={isDarkMode ? styles.homeBadge.color : undefined}
                             px={3}
                             py={1}
                             borderRadius="full"
                             cursor="pointer"
                             onClick={onClearFilter}
-                            _hover={{
-                                bg: 'gray.200',
-                            }}
+                            _hover={styles.homeBadge._hover}
                             display="flex"
                             alignItems="center"
                             gap={1}
@@ -111,12 +169,11 @@ const BreadcrumbNav = ({
                     {/* 面包屑路径 */}
                     {breadcrumbs.map((crumb, index) => (
                         <React.Fragment key={crumb.level}>
-                            <Icon as={ChevronRightIcon} color="gray.400" boxSize={4} />
+                            <Icon as={ChevronRightIcon} color={styles.chevron.color} boxSize={4} />
                             <Badge
-                                colorScheme={
-                                    crumb.level === 'lv1' ? 'purple' :
-                                    crumb.level === 'lv2' ? 'blue' : 'cyan'
-                                }
+                                {...(isDarkMode ? {} : { colorScheme: styles.crumbBadge(crumb.level, index === breadcrumbs.length - 1).colorScheme })}
+                                bg={isDarkMode ? styles.crumbBadge(crumb.level, index === breadcrumbs.length - 1).bg : undefined}
+                                color={isDarkMode ? styles.crumbBadge(crumb.level, index === breadcrumbs.length - 1).color : undefined}
                                 px={3}
                                 py={1}
                                 borderRadius="full"
@@ -140,21 +197,23 @@ const BreadcrumbNav = ({
                     <IconButton
                         size="sm"
                         icon={<FaTimes />}
-                        colorScheme="red"
+                        {...(isDarkMode ? {} : { colorScheme: 'red' })}
+                        color={isDarkMode ? styles.clearBtn.color : undefined}
                         variant="ghost"
                         borderRadius="full"
                         onClick={onClearFilter}
                         aria-label="清除筛选"
+                        _hover={isDarkMode ? styles.clearBtn._hover : undefined}
                     />
                 </Tooltip>
             </Flex>
 
             {/* 筛选提示 */}
-            <Text fontSize="xs" color="gray.500" mt={2}>
+            <Text fontSize="xs" color={styles.hintText.color} mt={2}>
                 当前显示「{breadcrumbs.map(b => b.label).join(' > ')}」分类下的概念，
                 <Text
                     as="span"
-                    color="purple.600"
+                    color={styles.linkText.color}
                     cursor="pointer"
                     fontWeight="medium"
                     onClick={onClearFilter}
diff --git a/src/views/Concept/index.js b/src/views/Concept/index.js
index 500505ab..06fe87d2 100644
--- a/src/views/Concept/index.js
+++ b/src/views/Concept/index.js
@@ -635,15 +635,19 @@ const ConceptCenter = () => {
         init();
     }, []);
 
-    // 概念卡片组件 - 科幻毛玻璃版
+    // 获取股票名称（兼容新旧API格式）
+    const getStockName = (stock) => stock.name || stock.stock_name || '未知';
+    const getStockCode = (stock) => stock.code || stock.stock_code || '';
+
+    // 概念卡片组件 - 深色毛玻璃版（HeroUI风格）
     const ConceptCard = ({ concept, position = 0 }) => {
         const changePercent = concept.price_info?.avg_change_pct;
         const changeColor = getChangeColor(changePercent);
         const hasChange = changePercent !== null && changePercent !== undefined;
         // H5 端使用更紧凑的尺寸
         const isMobile = useBreakpointValue({ base: true, md: false });
-        const coverHeight = useBreakpointValue({ base: '100px', md: '180px' });
-        const logoSize = useBreakpointValue({ base: '60px', md: '120px' });
+        const coverHeight = useBreakpointValue({ base: '100px', md: '160px' });
+        const logoSize = useBreakpointValue({ base: '60px', md: '100px' });
 
         // 生成随机涨幅数字背景
         const generateNumbersBackground = () => {
@@ -663,22 +667,24 @@ const ConceptCenter = () => {
             <Card
                 cursor="pointer"
                 onClick={() => handleConceptClick(concept.concept_id, concept.concept, concept, position)}
-                bg="white"
+                bg="rgba(15, 23, 42, 0.8)"
+                backdropFilter="blur(20px)"
                 borderWidth="1px"
-                borderColor="transparent"
+                borderColor="whiteAlpha.100"
                 overflow="hidden"
                 _hover={{
-                    transform: 'translateY(-8px)',
-                    boxShadow: '0 20px 40px rgba(139, 92, 246, 0.3)',
-                    borderColor: 'purple.400',
+                    transform: 'translateY(-6px)',
+                    boxShadow: '0 20px 40px rgba(139, 92, 246, 0.25)',
+                    borderColor: 'purple.500',
                 }}
-                transition="all 0.3s"
+                transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
                 position="relative"
-                boxShadow="0 4px 12px rgba(0, 0, 0, 0.1)"
+                boxShadow="0 4px 20px rgba(0, 0, 0, 0.3)"
+                borderRadius="2xl"
             >
                 {/* 毛玻璃涨幅数字背景 */}
                 <Box position="relative" height={coverHeight} overflow="hidden">
-                    {/* 渐变背景层 */}
+                    {/* 渐变背景层 - 涨红跌绿 */}
                     <Box
                         position="absolute"
                         top={0}
@@ -687,10 +693,10 @@ const ConceptCenter = () => {
                         bottom={0}
                         bgGradient={
                             hasChange && changePercent > 0
-                                ? "linear(135deg, #667eea 0%, #764ba2 100%)"
+                                ? "linear(135deg, rgba(153, 27, 27, 0.6) 0%, rgba(239, 68, 68, 0.4) 100%)"
                                 : hasChange && changePercent < 0
-                                ? "linear(135deg, #f093fb 0%, #f5576c 100%)"
-                                : "linear(135deg, #4facfe 0%, #00f2fe 100%)"
+                                ? "linear(135deg, rgba(20, 83, 45, 0.6) 0%, rgba(34, 197, 94, 0.4) 100%)"
+                                : "linear(135deg, rgba(71, 85, 105, 0.6) 0%, rgba(100, 116, 139, 0.4) 100%)"
                         }
                     />
 
@@ -706,7 +712,7 @@ const ConceptCenter = () => {
                         gridTemplateRows="repeat(6, 1fr)"
                         gap={2}
                         p={3}
-                        opacity={0.15}
+                        opacity={0.1}
                     >
                         {backgroundNumbers.map((num, idx) => (
                             <Flex
@@ -731,7 +737,7 @@ const ConceptCenter = () => {
                         transform="translate(-50%, -50%)"
                         width={logoSize}
                         height={logoSize}
-                        opacity={0.15}
+                        opacity={0.1}
                     >
                         <Image
                             src={`${process.env.PUBLIC_URL}/LOGO_badge.png`}
@@ -742,35 +748,15 @@ const ConceptCenter = () => {
                         />
                     </Box>
 
-                    {/* 毛玻璃层 */}
+                    {/* 高光效果 */}
                     <Box
                         position="absolute"
                         top={0}
                         left={0}
                         right={0}
-                        bottom={0}
-                        backdropFilter="blur(8px)"
-                        bg="rgba(255, 255, 255, 0.05)"
-                    />
-
-                    {/* 渐变遮罩 */}
-                    <Box
-                        position="absolute"
-                        top={0}
-                        left={0}
-                        right={0}
-                        bottom={0}
-                        bgGradient="linear(to-t, rgba(0,0,0,0.6), transparent)"
-                    />
-
-                    {/* 发光边框效果 */}
-                    <Box
-                        position="absolute"
-                        top={0}
-                        left={0}
-                        right={0}
-                        height="2px"
-                        bgGradient="linear(to-r, transparent, rgba(255,255,255,0.5), transparent)"
+                        height="50%"
+                        bg="linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%)"
+                        pointerEvents="none"
                     />
 
                     {/* 左上角涨跌幅 Badge */}
@@ -779,14 +765,14 @@ const ConceptCenter = () => {
                             position="absolute"
                             top={3}
                             left={3}
-                            bg={changeColor === 'red' ? 'red.500' : changeColor === 'green' ? 'green.500' : 'gray.500'}
+                            bg={changeColor === 'red' ? 'rgba(239, 68, 68, 0.9)' : changeColor === 'green' ? 'rgba(34, 197, 94, 0.9)' : 'rgba(100, 116, 139, 0.9)'}
                             color="white"
                             fontSize="sm"
                             px={3}
                             py={1}
                             borderRadius="full"
                             fontWeight="bold"
-                            boxShadow="0 4px 12px rgba(0, 0, 0, 0.3)"
+                            boxShadow={`0 4px 12px rgba(${changeColor === 'red' ? '239, 68, 68' : changeColor === 'green' ? '34, 197, 94' : '100, 116, 139'}, 0.4)`}
                             display="flex"
                             alignItems="center"
                             gap={1}
@@ -805,38 +791,36 @@ const ConceptCenter = () => {
                         position="absolute"
                         top={3}
                         right={3}
-                        bg="rgba(255, 255, 255, 0.2)"
+                        bg="rgba(0, 0, 0, 0.4)"
                         backdropFilter="blur(10px)"
                         color="white"
                         fontSize="xs"
                         px={3}
                         py={1}
                         borderRadius="full"
-                        fontWeight="bold"
-                        boxShadow="0 4px 12px rgba(0, 0, 0, 0.2)"
+                        fontWeight="medium"
                         border="1px solid"
-                        borderColor="whiteAlpha.300"
+                        borderColor="whiteAlpha.200"
                     >
                         {concept.stock_count || 0} 只股票
                     </Badge>
                 </Box>
 
-                <CardBody p={{ base: 3, md: 4 }}>
+                <CardBody p={{ base: 3, md: 4 }} bg="transparent">
                     <VStack align="start" spacing={{ base: 1, md: 2 }}>
                         {/* 概念名称 */}
                         <Heading
                             size={{ base: 'xs', md: 'sm' }}
-                            color="gray.800"
+                            color="white"
                             noOfLines={1}
-                            bgGradient="linear(to-r, purple.600, pink.600)"
-                            bgClip="text"
                             fontWeight="bold"
+                            letterSpacing="0.02em"
                         >
                             {concept.concept}
                         </Heading>
 
                         {/* 描述信息 - H5端显示1行 */}
-                        <Text color="gray.600" fontSize="xs" noOfLines={isMobile ? 1 : 2} minH={{ base: '16px', md: '32px' }}>
+                        <Text color="whiteAlpha.600" fontSize="xs" noOfLines={isMobile ? 1 : 2} minH={{ base: '16px', md: '32px' }}>
                             {concept.description || '暂无描述信息'}
                         </Text>
 
@@ -844,31 +828,34 @@ const ConceptCenter = () => {
                             <Box
                                 width="100%"
                                 p={{ base: 2, md: 3 }}
-                                bg="linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%)"
-                                borderRadius="lg"
+                                bg="whiteAlpha.50"
+                                backdropFilter="blur(10px)"
+                                borderRadius="xl"
                                 cursor="pointer"
                                 onClick={(e) => handleViewStocks(e, concept)}
                                 _hover={{
-                                    bg: 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%)',
+                                    bg: 'whiteAlpha.100',
                                     transform: 'translateX(2px)',
                                 }}
                                 transition="all 0.2s"
                                 border="1px solid"
-                                borderColor="purple.100"
+                                borderColor="whiteAlpha.100"
                             >
                                 <Flex align="center" justify="space-between">
                                     <Box flex={1}>
                                         <HStack spacing={2} mb={{ base: 1, md: 2 }}>
-                                            <Icon as={FaChartLine} boxSize={3} color="purple.500" />
-                                            <Text fontSize="xs" color="purple.700" fontWeight="bold">
+                                            <Icon as={FaChartLine} boxSize={3} color="purple.300" />
+                                            <Text fontSize="xs" color="purple.200" fontWeight="bold">
                                                 热门个股
                                             </Text>
                                             {!hasFeatureAccess('hot_stocks') && (
                                                 <Badge
-                                                    colorScheme="yellow"
+                                                    bg="yellow.500"
+                                                    color="gray.900"
                                                     size="sm"
                                                     borderRadius="full"
                                                     px={2}
+                                                    fontSize="xs"
                                                 >
                                                     🔒Pro
                                                 </Badge>
@@ -881,24 +868,24 @@ const ConceptCenter = () => {
                                                         <Tag
                                                             key={idx}
                                                             size="sm"
-                                                            bgGradient="linear(to-r, purple.500, pink.500)"
+                                                            bg="purple.500"
                                                             color="white"
                                                             borderRadius="full"
                                                             px={2}
                                                         >
-                                                            <TagLabel fontSize="xs">{stock.stock_name}</TagLabel>
+                                                            <TagLabel fontSize="xs">{getStockName(stock)}</TagLabel>
                                                         </Tag>
                                                     ))}
                                                     {concept.stocks.length > 2 && (
-                                                        <Text fontSize="xs" color="purple.600" fontWeight="bold">
+                                                        <Text fontSize="xs" color="purple.300" fontWeight="bold">
                                                             +{concept.stocks.length - 2}
                                                         </Text>
                                                     )}
                                                 </>
                                             ) : (
                                                 <HStack spacing={1}>
-                                                    <Icon as={FaLock} boxSize="10px" color="yellow.600" />
-                                                    <Text fontSize="xs" color="yellow.600" fontWeight="medium">
+                                                    <Icon as={FaLock} boxSize="10px" color="yellow.400" />
+                                                    <Text fontSize="xs" color="yellow.400" fontWeight="medium">
                                                         升级查看{concept.stocks.length}只个股
                                                     </Text>
                                                 </HStack>
@@ -907,32 +894,41 @@ const ConceptCenter = () => {
                                     </Box>
                                     <Icon
                                         as={hasFeatureAccess('hot_stocks') ? ChevronRightIcon : FaLock}
-                                        color={hasFeatureAccess('hot_stocks') ? 'purple.500' : 'yellow.600'}
+                                        color={hasFeatureAccess('hot_stocks') ? 'purple.300' : 'yellow.400'}
                                         boxSize={4}
                                     />
                                 </Flex>
                             </Box>
                         )}
 
-                        <Divider borderColor="purple.100" my={{ base: 1, md: 0 }} />
+                        <Divider borderColor="whiteAlpha.100" my={{ base: 1, md: 0 }} />
 
                         <Flex width="100%" justify="space-between" align="center">
-                            {formatAddedDate(concept)}
+                            {/* 添加日期 - 深色主题适配 */}
+                            {concept.created_at || concept.added_date || concept.happened_times?.[0] ? (
+                                <HStack spacing={2}>
+                                    <Icon as={CalendarIcon} boxSize={3} color="cyan.400" />
+                                    <Text fontSize="xs" color="whiteAlpha.600" fontWeight="medium">
+                                        添加于 {new Date(concept.created_at || concept.added_date || concept.happened_times?.[0]).toLocaleDateString('zh-CN')}
+                                    </Text>
+                                </HStack>
+                            ) : <Box />}
 
                             <Button
                                 size={{ base: 'xs', md: 'sm' }}
                                 leftIcon={<FaHistory />}
-                                bgGradient="linear(to-r, purple.500, pink.500)"
+                                bg="purple.500"
                                 color="white"
                                 variant="solid"
                                 onClick={(e) => handleViewContent(e, concept.concept, concept.concept_id)}
                                 borderRadius="full"
                                 px={{ base: 2, md: 4 }}
                                 fontWeight="medium"
-                                boxShadow="0 4px 12px rgba(139, 92, 246, 0.3)"
+                                boxShadow="0 4px 12px rgba(139, 92, 246, 0.4)"
                                 _hover={{
+                                    bg: 'purple.400',
                                     transform: 'scale(1.05)',
-                                    boxShadow: '0 6px 16px rgba(139, 92, 246, 0.4)',
+                                    boxShadow: '0 6px 16px rgba(139, 92, 246, 0.5)',
                                 }}
                                 transition="all 0.2s"
                             >
@@ -949,7 +945,7 @@ const ConceptCenter = () => {
                     left={0}
                     right={0}
                     height="2px"
-                    bgGradient="linear(to-r, purple.400, pink.400, blue.400)"
+                    bgGradient="linear(to-r, purple.500, pink.500, cyan.500)"
                     opacity={0}
                     _groupHover={{ opacity: 1 }}
                     transition="opacity 0.3s"
@@ -958,7 +954,7 @@ const ConceptCenter = () => {
         );
     };
 
-    // 概念列表项组件 - 列表视图
+    // 概念列表项组件 - 列表视图（深色主题版）
     const ConceptListItem = ({ concept, position = 0 }) => {
         const changePercent = concept.price_info?.avg_change_pct;
         const changeColor = getChangeColor(changePercent);
@@ -968,38 +964,49 @@ const ConceptCenter = () => {
             <Card
                 cursor="pointer"
                 onClick={() => handleConceptClick(concept.concept_id, concept.concept, concept, position)}
-                bg="white"
+                bg="rgba(15, 23, 42, 0.8)"
+                backdropFilter="blur(20px)"
                 borderWidth="1px"
-                borderColor="gray.200"
+                borderColor="whiteAlpha.100"
                 overflow="hidden"
+                borderRadius="2xl"
                 _hover={{
                     transform: 'translateX(4px)',
-                    boxShadow: 'lg',
-                    borderColor: 'purple.300',
+                    boxShadow: '0 8px 32px rgba(139, 92, 246, 0.25)',
+                    borderColor: 'purple.500',
                 }}
-                transition="all 0.3s"
+                transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
             >
-                <CardBody p={6}>
-                    <Flex align="center" gap={6}>
+                <CardBody p={{ base: 4, md: 6 }}>
+                    <Flex align="center" gap={{ base: 3, md: 6 }} flexWrap={{ base: 'wrap', md: 'nowrap' }}>
                         {/* 左侧图标区域 */}
                         <Box
-                            width="80px"
-                            height="80px"
+                            width={{ base: '60px', md: '80px' }}
+                            height={{ base: '60px', md: '80px' }}
                             borderRadius="xl"
-                            bgGradient="linear(to-br, purple.100, pink.100)"
+                            bg={hasChange
+                                ? changePercent > 0
+                                    ? "linear-gradient(135deg, rgba(153, 27, 27, 0.6) 0%, rgba(239, 68, 68, 0.4) 100%)"
+                                    : changePercent < 0
+                                    ? "linear-gradient(135deg, rgba(20, 83, 45, 0.6) 0%, rgba(34, 197, 94, 0.4) 100%)"
+                                    : "linear-gradient(135deg, rgba(71, 85, 105, 0.6) 0%, rgba(100, 116, 139, 0.4) 100%)"
+                                : "linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(168, 85, 247, 0.3) 100%)"
+                            }
                             display="flex"
                             alignItems="center"
                             justifyContent="center"
                             position="relative"
                             flexShrink={0}
+                            border="1px solid"
+                            borderColor="whiteAlpha.100"
                         >
-                            <Icon as={FaTags} boxSize={8} color="purple.400" />
+                            <Icon as={FaTags} boxSize={{ base: 6, md: 8 }} color="white" opacity={0.8} />
                             {hasChange && (
                                 <Badge
                                     position="absolute"
                                     top={-2}
                                     right={-2}
-                                    bg={changeColor === 'red' ? 'red.500' : changeColor === 'green' ? 'green.500' : 'gray.500'}
+                                    bg={changeColor === 'red' ? 'rgba(239, 68, 68, 0.9)' : changeColor === 'green' ? 'rgba(34, 197, 94, 0.9)' : 'rgba(100, 116, 139, 0.9)'}
                                     color="white"
                                     fontSize="xs"
                                     px={2}
@@ -1007,6 +1014,7 @@ const ConceptCenter = () => {
                                     borderRadius="full"
                                     fontWeight="bold"
                                     minW="auto"
+                                    boxShadow={`0 2px 8px rgba(${changeColor === 'red' ? '239, 68, 68' : changeColor === 'green' ? '34, 197, 94' : '100, 116, 139'}, 0.4)`}
                                 >
                                     <Icon
                                         as={changePercent > 0 ? FaArrowUp : changePercent < 0 ? FaArrowDown : null}
@@ -1020,47 +1028,58 @@ const ConceptCenter = () => {
 
                         {/* 中间内容区域 */}
                         <Box flex={1}>
-                            <VStack align="start" spacing={3}>
-                                <Heading size="md" color="gray.800" noOfLines={1}>
+                            <VStack align="start" spacing={{ base: 2, md: 3 }}>
+                                <Heading size={{ base: 'sm', md: 'md' }} color="white" noOfLines={1}>
                                     {concept.concept}
                                 </Heading>
 
-                                <Text color="gray.600" fontSize="sm" noOfLines={2}>
+                                <Text color="whiteAlpha.600" fontSize="sm" noOfLines={2}>
                                     {concept.description || '该概念板块涵盖相关技术、产业链和市场应用等多个维度的投资机会'}
                                 </Text>
 
                                 <HStack spacing={4} flexWrap="wrap">
                                     <HStack spacing={1}>
-                                        <Icon as={FaChartLine} boxSize={4} color="purple.500" />
-                                        <Text fontSize="sm" fontWeight="medium" color="gray.700">
+                                        <Icon as={FaChartLine} boxSize={4} color="purple.300" />
+                                        <Text fontSize="sm" fontWeight="medium" color="whiteAlpha.800">
                                             {concept.stock_count || 0} 只股票
                                         </Text>
                                     </HStack>
 
                                     {hasChange && concept.price_info?.trade_date && (
                                         <HStack spacing={1}>
-                                            <Icon as={FaCalendarAlt} boxSize={4} color="blue.500" />
-                                            <Text fontSize="sm" color="gray.600">
+                                            <Icon as={FaCalendarAlt} boxSize={4} color="cyan.400" />
+                                            <Text fontSize="sm" color="whiteAlpha.600">
                                                 {new Date(concept.price_info.trade_date).toLocaleDateString('zh-CN')}
                                             </Text>
                                         </HStack>
                                     )}
 
-                                    {formatAddedDate(concept)}
+                                    {/* 添加日期 - 深色主题 */}
+                                    {(concept.created_at || concept.added_date || concept.happened_times?.[0]) && (
+                                        <HStack spacing={1}>
+                                            <Icon as={CalendarIcon} boxSize={4} color="cyan.400" />
+                                            <Text fontSize="sm" color="whiteAlpha.600">
+                                                添加于 {new Date(concept.created_at || concept.added_date || concept.happened_times?.[0]).toLocaleDateString('zh-CN')}
+                                            </Text>
+                                        </HStack>
+                                    )}
                                 </HStack>
                             </VStack>
                         </Box>
 
                         {/* 右侧操作区域 */}
-                        <VStack spacing={3} align="end" flexShrink={0}>
+                        <VStack spacing={3} align="end" flexShrink={0} display={{ base: 'none', md: 'flex' }}>
                             <HStack spacing={3}>
                                 <Button
                                     size="sm"
                                     leftIcon={<ViewIcon />}
-                                    colorScheme="blue"
-                                    variant="outline"
+                                    bg="whiteAlpha.100"
+                                    color="white"
+                                    border="1px solid"
+                                    borderColor="whiteAlpha.200"
                                     onClick={(e) => handleViewStocks(e, concept)}
                                     borderRadius="full"
+                                    _hover={{ bg: 'whiteAlpha.200', borderColor: 'whiteAlpha.300' }}
                                 >
                                     查看个股
                                 </Button>
@@ -1068,10 +1087,12 @@ const ConceptCenter = () => {
                                 <Button
                                     size="sm"
                                     leftIcon={<FaChartLine />}
-                                    colorScheme="purple"
-                                    variant="solid"
+                                    bg="purple.500"
+                                    color="white"
                                     onClick={(e) => handleViewContent(e, concept.concept, concept.concept_id)}
                                     borderRadius="full"
+                                    boxShadow="0 4px 12px rgba(139, 92, 246, 0.4)"
+                                    _hover={{ bg: 'purple.400', boxShadow: '0 6px 16px rgba(139, 92, 246, 0.5)' }}
                                 >
                                     历史时间轴
                                 </Button>
@@ -1080,9 +1101,9 @@ const ConceptCenter = () => {
                             {concept.stocks && concept.stocks.length > 0 && (
                                 <Box>
                                     <HStack spacing={1} mb={2}>
-                                        <Text fontSize="xs" color="gray.500">热门个股</Text>
+                                        <Text fontSize="xs" color="whiteAlpha.500">热门个股</Text>
                                         {!hasFeatureAccess('hot_stocks') && (
-                                            <Badge colorScheme="yellow" size="sm">
+                                            <Badge bg="yellow.500" color="gray.900" size="sm" fontSize="xs">
                                                 🔒需Pro
                                             </Badge>
                                         )}
@@ -1092,14 +1113,14 @@ const ConceptCenter = () => {
                                             <>
                                                 {concept.stocks.slice(0, 3).map((stock, idx) => (
                                                     <WrapItem key={idx}>
-                                                        <Tag size="sm" colorScheme="purple" variant="subtle">
-                                                            <TagLabel fontSize="xs">{stock.stock_name}</TagLabel>
+                                                        <Tag size="sm" bg="purple.500" color="white" borderRadius="full">
+                                                            <TagLabel fontSize="xs">{getStockName(stock)}</TagLabel>
                                                         </Tag>
                                                     </WrapItem>
                                                 ))}
                                                 {concept.stocks.length > 3 && (
                                                     <WrapItem>
-                                                        <Text fontSize="xs" color="purple.600" fontWeight="medium">
+                                                        <Text fontSize="xs" color="purple.300" fontWeight="medium">
                                                             +{concept.stocks.length - 3}更多
                                                         </Text>
                                                     </WrapItem>
@@ -1108,8 +1129,8 @@ const ConceptCenter = () => {
                                         ) : (
                                             <WrapItem>
                                                 <HStack spacing={1}>
-                                                    <Icon as={FaLock} boxSize="8px" color="yellow.600" />
-                                                    <Text fontSize="xs" color="yellow.600" fontWeight="medium">
+                                                    <Icon as={FaLock} boxSize="8px" color="yellow.400" />
+                                                    <Text fontSize="xs" color="yellow.400" fontWeight="medium">
                                                         升级查看{concept.stocks.length}只
                                                     </Text>
                                                 </HStack>
@@ -1125,26 +1146,26 @@ const ConceptCenter = () => {
         );
     };
 
-    // 骨架屏组件
+    // 骨架屏组件 - 深色主题
     const SkeletonCard = () => (
-        <Card bg="white" borderWidth="1px" borderColor="gray.200">
-            <Skeleton height="200px" />
+        <Card bg="rgba(15, 23, 42, 0.8)" borderWidth="1px" borderColor="whiteAlpha.100" borderRadius="2xl">
+            <Skeleton height="160px" startColor="whiteAlpha.100" endColor="whiteAlpha.200" />
             <CardBody>
-                <SkeletonText mt={4} noOfLines={4} spacing={4} />
+                <SkeletonText mt={4} noOfLines={4} spacing={4} startColor="whiteAlpha.100" endColor="whiteAlpha.200" />
             </CardBody>
         </Card>
     );
 
-    // 日期选择组件 - 科幻风格
+    // 日期选择组件 - 深色主题
     const DateSelector = () => (
         <Box
             p={4}
-            bg="rgba(255, 255, 255, 0.8)"
-            backdropFilter="blur(10px)"
-            borderRadius="xl"
+            bg="rgba(15, 23, 42, 0.8)"
+            backdropFilter="blur(20px)"
+            borderRadius="2xl"
             border="1px solid"
-            borderColor="purple.100"
-            boxShadow="0 4px 20px rgba(139, 92, 246, 0.1)"
+            borderColor="whiteAlpha.100"
+            boxShadow="0 4px 20px rgba(0, 0, 0, 0.3)"
         >
             <Flex
                 direction={{ base: 'column', lg: 'row' }}
@@ -1165,17 +1186,18 @@ const ConceptCenter = () => {
                     }}
                     latestTradeDate={latestTradeDate}
                     label="交易日期"
+                    isDarkMode={true}
                 />
 
-                {/* 快捷按钮保留在页面内 */}
+                {/* 快捷按钮 - 深色主题 */}
                 <ButtonGroup size="sm" variant="outline" flexWrap="wrap">
                     <Button
                         onClick={() => handleQuickDateSelect(0)}
-                        borderColor="purple.300"
-                        color="purple.600"
+                        borderColor="whiteAlpha.300"
+                        color="white"
                         borderRadius="full"
                         _hover={{
-                            bg: 'purple.50',
+                            bg: 'whiteAlpha.100',
                             borderColor: 'purple.400',
                         }}
                     >
@@ -1183,11 +1205,11 @@ const ConceptCenter = () => {
                     </Button>
                     <Button
                         onClick={() => handleQuickDateSelect(1)}
-                        borderColor="purple.300"
-                        color="purple.600"
+                        borderColor="whiteAlpha.300"
+                        color="white"
                         borderRadius="full"
                         _hover={{
-                            bg: 'purple.50',
+                            bg: 'whiteAlpha.100',
                             borderColor: 'purple.400',
                         }}
                     >
@@ -1195,11 +1217,11 @@ const ConceptCenter = () => {
                     </Button>
                     <Button
                         onClick={() => handleQuickDateSelect(7)}
-                        borderColor="purple.300"
-                        color="purple.600"
+                        borderColor="whiteAlpha.300"
+                        color="white"
                         borderRadius="full"
                         _hover={{
-                            bg: 'purple.50',
+                            bg: 'whiteAlpha.100',
                             borderColor: 'purple.400',
                         }}
                     >
@@ -1207,11 +1229,11 @@ const ConceptCenter = () => {
                     </Button>
                     <Button
                         onClick={() => handleQuickDateSelect(30)}
-                        borderColor="purple.300"
-                        color="purple.600"
+                        borderColor="whiteAlpha.300"
+                        color="white"
                         borderRadius="full"
                         _hover={{
-                            bg: 'purple.50',
+                            bg: 'whiteAlpha.100',
                             borderColor: 'purple.400',
                         }}
                     >
@@ -1223,7 +1245,7 @@ const ConceptCenter = () => {
     );
 
     return (
-        <Box minH="100vh" bg="linear-gradient(180deg, #f8f9ff 0%, #f0f2ff 100%)">
+        <Box minH="100vh" bg="linear-gradient(to-b, gray.900, slate.900, gray.900)">
             {/* 导航栏已由 MainLayout 提供 */}
 
             {/* Hero Section - 精简版 */}
@@ -1434,7 +1456,7 @@ const ConceptCenter = () => {
                 </Container>
             </Box>
 
-            {/* 主内容区域 */}
+            {/* 主内容区域 - 深色主题 */}
             <Container maxW="container.xl" py={10}>
                 <Box mb={6}>
                     <DateSelector />
@@ -1447,11 +1469,12 @@ const ConceptCenter = () => {
 
                         <Card
                             mb={8}
-                            bg="rgba(255, 255, 255, 0.8)"
-                            backdropFilter="blur(10px)"
+                            bg="rgba(15, 23, 42, 0.8)"
+                            backdropFilter="blur(20px)"
                             border="1px solid"
-                            borderColor="purple.100"
-                            boxShadow="0 4px 20px rgba(139, 92, 246, 0.1)"
+                            borderColor="whiteAlpha.100"
+                            boxShadow="0 4px 20px rgba(0, 0, 0, 0.3)"
+                            borderRadius="2xl"
                         >
                             <CardBody>
                                 <Flex
@@ -1461,16 +1484,25 @@ const ConceptCenter = () => {
                                     gap={4}
                                 >
                                     <HStack spacing={4} align="center">
-                                        <Icon as={FaTags} boxSize={4} color="purple.500" />
-                                        <Text fontWeight="bold" color="purple.700">排序方式：</Text>
+                                        <Icon as={FaTags} boxSize={4} color="purple.300" />
+                                        <Text fontWeight="bold" color="white">排序方式：</Text>
                                         <Select
                                             value={sortBy}
                                             onChange={(e) => handleSortChange(e.target.value)}
                                             width="200px"
-                                            focusBorderColor="purple.500"
-                                            borderColor="purple.200"
+                                            focusBorderColor="purple.400"
+                                            borderColor="whiteAlpha.300"
                                             borderRadius="lg"
                                             fontWeight="medium"
+                                            color="white"
+                                            bg="whiteAlpha.50"
+                                            _hover={{ borderColor: 'purple.400' }}
+                                            sx={{
+                                                option: {
+                                                    bg: 'gray.800',
+                                                    color: 'white',
+                                                },
+                                            }}
                                         >
                                             <option value="change_pct">涨跌幅</option>
                                             <option value="_score">相关度</option>
@@ -1482,15 +1514,14 @@ const ConceptCenter = () => {
                                             <Tooltip label="搜索时自动切换到相关度排序，以显示最匹配的结果。您也可以手动切换其他排序方式。">
                                                 <HStack
                                                     spacing={1}
-                                                    bg="blue.50"
+                                                    bg="blue.500"
                                                     px={3}
                                                     py={1}
                                                     borderRadius="full"
-                                                    border="1px solid"
-                                                    borderColor="blue.200"
+                                                    boxShadow="0 0 10px rgba(59, 130, 246, 0.4)"
                                                 >
-                                                    <Icon as={InfoIcon} color="blue.500" boxSize={3} />
-                                                    <Text fontSize="xs" color="blue.600" fontWeight="medium">
+                                                    <Icon as={InfoIcon} color="white" boxSize={3} />
+                                                    <Text fontSize="xs" color="white" fontWeight="medium">
                                                         智能排序
                                                     </Text>
                                                 </HStack>
@@ -1508,12 +1539,12 @@ const ConceptCenter = () => {
                                                         setViewMode('hierarchy');
                                                     }
                                                 }}
-                                                bg={viewMode === 'hierarchy' ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'transparent'}
-                                                color={viewMode === 'hierarchy' ? 'white' : 'purple.500'}
-                                                borderColor="purple.500"
+                                                bg={viewMode === 'hierarchy' ? 'purple.500' : 'transparent'}
+                                                color={viewMode === 'hierarchy' ? 'white' : 'whiteAlpha.700'}
+                                                borderColor="whiteAlpha.300"
                                                 _hover={{
-                                                    bg: viewMode === 'hierarchy' ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'purple.50',
-                                                    boxShadow: viewMode === 'hierarchy' ? '0 0 10px rgba(139, 92, 246, 0.3)' : 'none',
+                                                    bg: viewMode === 'hierarchy' ? 'purple.400' : 'whiteAlpha.100',
+                                                    boxShadow: viewMode === 'hierarchy' ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none',
                                                 }}
                                                 aria-label="层级图"
                                             />
@@ -1527,12 +1558,12 @@ const ConceptCenter = () => {
                                                         setViewMode('grid');
                                                     }
                                                 }}
-                                                bg={viewMode === 'grid' ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'transparent'}
-                                                color={viewMode === 'grid' ? 'white' : 'purple.500'}
-                                                borderColor="purple.500"
+                                                bg={viewMode === 'grid' ? 'purple.500' : 'transparent'}
+                                                color={viewMode === 'grid' ? 'white' : 'whiteAlpha.700'}
+                                                borderColor="whiteAlpha.300"
                                                 _hover={{
-                                                    bg: viewMode === 'grid' ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'purple.50',
-                                                    boxShadow: viewMode === 'grid' ? '0 0 10px rgba(139, 92, 246, 0.3)' : 'none',
+                                                    bg: viewMode === 'grid' ? 'purple.400' : 'whiteAlpha.100',
+                                                    boxShadow: viewMode === 'grid' ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none',
                                                 }}
                                                 aria-label="网格视图"
                                             />
@@ -1546,12 +1577,12 @@ const ConceptCenter = () => {
                                                         setViewMode('list');
                                                     }
                                                 }}
-                                                bg={viewMode === 'list' ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'transparent'}
-                                                color={viewMode === 'list' ? 'white' : 'purple.500'}
-                                                borderColor="purple.500"
+                                                bg={viewMode === 'list' ? 'purple.500' : 'transparent'}
+                                                color={viewMode === 'list' ? 'white' : 'whiteAlpha.700'}
+                                                borderColor="whiteAlpha.300"
                                                 _hover={{
-                                                    bg: viewMode === 'list' ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'purple.50',
-                                                    boxShadow: viewMode === 'list' ? '0 0 10px rgba(139, 92, 246, 0.3)' : 'none',
+                                                    bg: viewMode === 'list' ? 'purple.400' : 'whiteAlpha.100',
+                                                    boxShadow: viewMode === 'list' ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none',
                                                 }}
                                                 aria-label="列表视图"
                                             />
@@ -1566,15 +1597,16 @@ const ConceptCenter = () => {
                             filter={hierarchyFilter}
                             onClearFilter={handleClearHierarchyFilter}
                             onNavigate={handleNavigateHierarchy}
+                            isDarkMode={true}
                         />
 
                         {selectedDate && viewMode !== 'hierarchy' && (
-                            <Box mb={4} p={3} bg="blue.50" borderRadius="md" borderLeft="4px solid" borderColor="blue.500">
+                            <Box mb={4} p={3} bg="rgba(59, 130, 246, 0.2)" borderRadius="xl" borderLeft="4px solid" borderColor="blue.400">
                                 <HStack>
-                                    <Icon as={InfoIcon} color="blue.500" />
-                                    <Text fontSize="sm" color="blue.700">
-                                        当前显示 <strong>{selectedDate.toLocaleDateString('zh-CN')}</strong> 的概念涨跌幅数据
-                                        {searchQuery && <span>，搜索词：<strong>"{searchQuery}"</strong></span>}
+                                    <Icon as={InfoIcon} color="blue.300" />
+                                    <Text fontSize="sm" color="whiteAlpha.800">
+                                        当前显示 <Text as="strong" color="cyan.300">{selectedDate.toLocaleDateString('zh-CN')}</Text> 的概念涨跌幅数据
+                                        {searchQuery && <span>，搜索词：<Text as="strong" color="cyan.300">"{searchQuery}"</Text></span>}
                                     </Text>
                                 </HStack>
                             </Box>
@@ -1614,30 +1646,30 @@ const ConceptCenter = () => {
                                 <Center mt={12}>
                                     <HStack
                                         spacing={3}
-                                        bg="rgba(255, 255, 255, 0.8)"
-                                        backdropFilter="blur(10px)"
+                                        bg="rgba(15, 23, 42, 0.8)"
+                                        backdropFilter="blur(20px)"
                                         px={6}
                                         py={3}
                                         borderRadius="full"
                                         border="1px solid"
-                                        borderColor="purple.100"
-                                        boxShadow="0 4px 20px rgba(139, 92, 246, 0.15)"
+                                        borderColor="whiteAlpha.100"
+                                        boxShadow="0 4px 20px rgba(0, 0, 0, 0.3)"
                                     >
                                         <Button
                                             size="sm"
                                             onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
                                             isDisabled={currentPage === 1}
-                                            bgGradient="linear(to-r, purple.500, pink.500)"
+                                            bg="purple.500"
                                             color="white"
                                             variant="solid"
                                             borderRadius="full"
                                             _hover={{
-                                                bgGradient: 'linear(to-r, purple.600, pink.600)',
-                                                boxShadow: '0 0 15px rgba(139, 92, 246, 0.4)',
+                                                bg: 'purple.400',
+                                                boxShadow: '0 0 15px rgba(139, 92, 246, 0.5)',
                                             }}
                                             _disabled={{
-                                                bg: 'gray.200',
-                                                color: 'gray.400',
+                                                bg: 'whiteAlpha.100',
+                                                color: 'whiteAlpha.400',
                                                 cursor: 'not-allowed',
                                             }}
                                         >
@@ -1655,15 +1687,15 @@ const ConceptCenter = () => {
                                                         key={pageNum}
                                                         size="sm"
                                                         onClick={() => handlePageChange(pageNum)}
-                                                        bg={pageNum === currentPage ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'transparent'}
-                                                        color={pageNum === currentPage ? 'white' : 'purple.600'}
+                                                        bg={pageNum === currentPage ? 'purple.500' : 'transparent'}
+                                                        color={pageNum === currentPage ? 'white' : 'whiteAlpha.700'}
                                                         variant={pageNum === currentPage ? 'solid' : 'ghost'}
                                                         borderRadius="full"
                                                         minW="40px"
                                                         fontWeight="bold"
                                                         _hover={{
-                                                            bg: pageNum === currentPage ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' : 'purple.50',
-                                                            boxShadow: pageNum === currentPage ? '0 0 10px rgba(139, 92, 246, 0.3)' : 'none',
+                                                            bg: pageNum === currentPage ? 'purple.400' : 'whiteAlpha.100',
+                                                            boxShadow: pageNum === currentPage ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none',
                                                         }}
                                                     >
                                                         {pageNum}
@@ -1676,17 +1708,17 @@ const ConceptCenter = () => {
                                             size="sm"
                                             onClick={() => handlePageChange(Math.min(totalPages, currentPage + 1))}
                                             isDisabled={currentPage === totalPages}
-                                            bgGradient="linear(to-r, purple.500, pink.500)"
+                                            bg="purple.500"
                                             color="white"
                                             variant="solid"
                                             borderRadius="full"
                                             _hover={{
-                                                bgGradient: 'linear(to-r, purple.600, pink.600)',
-                                                boxShadow: '0 0 15px rgba(139, 92, 246, 0.4)',
+                                                bg: 'purple.400',
+                                                boxShadow: '0 0 15px rgba(139, 92, 246, 0.5)',
                                             }}
                                             _disabled={{
-                                                bg: 'gray.200',
-                                                color: 'gray.400',
+                                                bg: 'whiteAlpha.100',
+                                                color: 'whiteAlpha.400',
                                                 cursor: 'not-allowed',
                                             }}
                                         >
@@ -1698,10 +1730,10 @@ const ConceptCenter = () => {
                         ) : viewMode !== 'hierarchy' ? (
                             <Center h="400px">
                                 <VStack spacing={6}>
-                                    <Icon as={FaTags} boxSize={20} color="gray.300" />
+                                    <Icon as={FaTags} boxSize={20} color="whiteAlpha.300" />
                                     <VStack spacing={2}>
-                                        <Text fontSize="xl" color="gray.600" fontWeight="medium">暂无概念数据</Text>
-                                        <Text color="gray.500">
+                                        <Text fontSize="xl" color="white" fontWeight="medium">暂无概念数据</Text>
+                                        <Text color="whiteAlpha.600">
                                             {hierarchyFilter?.lv1
                                                 ? `「${[hierarchyFilter.lv1, hierarchyFilter.lv2, hierarchyFilter.lv3].filter(Boolean).join(' > ')}」分类下暂无数据`
                                                 : '请尝试其他搜索关键词或选择其他日期'
@@ -1710,9 +1742,10 @@ const ConceptCenter = () => {
                                         {hierarchyFilter?.lv1 && (
                                             <Button
                                                 size="sm"
-                                                colorScheme="purple"
-                                                variant="outline"
+                                                bg="purple.500"
+                                                color="white"
                                                 onClick={handleClearHierarchyFilter}
+                                                _hover={{ bg: 'purple.400' }}
                                             >
                                                 清除筛选
                                             </Button>
@@ -1730,27 +1763,36 @@ const ConceptCenter = () => {
                                 <ConceptStatsPanel
                                     apiBaseUrl={API_BASE_URL}
                                     onConceptClick={handleConceptClick}
+                                    isDarkMode={true}
                                 />
                             ) : (
-                                <Card>
+                                <Card
+                                    bg="rgba(15, 23, 42, 0.8)"
+                                    backdropFilter="blur(20px)"
+                                    border="1px solid"
+                                    borderColor="whiteAlpha.100"
+                                    borderRadius="2xl"
+                                >
                                     <CardBody p={6}>
                                         <VStack spacing={4} textAlign="center">
-                                            <Icon as={FaChartLine} boxSize={12} color="gray.300" />
+                                            <Icon as={FaChartLine} boxSize={12} color="whiteAlpha.300" />
                                             <VStack spacing={2}>
-                                                <Heading size="md" color="gray.600">
+                                                <Heading size="md" color="white">
                                                     概念统计中心
                                                 </Heading>
-                                                <Text fontSize="sm" color="gray.500">
+                                                <Text fontSize="sm" color="whiteAlpha.600">
                                                     此功能需要Pro版订阅才能使用
                                                 </Text>
                                             </VStack>
                                             <Button
-                                                colorScheme="blue"
+                                                bg="blue.500"
+                                                color="white"
                                                 leftIcon={<Icon as={FaRocket} />}
                                                 onClick={() => {
                                                     setUpgradeFeature('pro');
                                                     setUpgradeModalOpen(true);
                                                 }}
+                                                _hover={{ bg: 'blue.400', boxShadow: '0 0 15px rgba(59, 130, 246, 0.5)' }}
                                             >
                                                 升级到Pro版
                                             </Button>