
        /* 优化配色方案 */
        :root {
            --primary-color: #0d6efd;
            --secondary-color: #198754;
            --accent-color: #fd7e14;
            --light-bg: #f8f9fa;
            --dark-bg: #212529;
        }
        
        /* 页面标题区域渐变背景 */
        .page-banner {
            background: linear-gradient(135deg, var(--light-bg) 0%, #e0f0ff 100%);
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        
        /* 卡片悬停效果 */
        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
        }
        
        /* 进度条动画 */
        .animated-progress .progress-bar {
            width: 0;
            transition: width 1.5s ease-in-out;
        }
        
        /* 创建一个突出显示的卡片样式 */
        .card-highlight {
            border-left: 4px solid var(--accent-color);
        }
        
        /* 图标效果 */
        .icon-feature {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: rgba(13, 110, 253, 0.1);
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }
        .icon-feature:hover {
            transform: scale(1.1);
        }
        
        /* 表格行悬停效果 */
        .table-hover tbody tr:hover {
            background-color: rgba(13, 110, 253, 0.05);
        }
        
        /* 自定义按钮 */
        .btn-outline-gradient {
            background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            background-size: 200% auto;
            color: white;
            border: none;
            transition: 0.5s;
            background-position: right center;
        }
        .btn-outline-gradient:hover {
            background-position: left center;
            color: white;
        }
        
        /* 添加一个波浪效果在页面底部 */
        .wave-divider {
            position: relative;
            height: 60px;
            background-color: #fff;
        }
        .wave-divider::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            background-repeat: repeat-x;
            height: 60px;
            background-size: 60px 100%;
            background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 120 28" xmlns="http:// www.w3.org/2000/svg"><path d="M0 20.2c15.9 0 15.9-12.2 31.8-12.2 15.9 0 15.9 12.2 31.8 12.2 15.9 0 15.9-12.2 31.8-12.2 15.9 0 15.9 12.2 31.8 12.2v9.6h-127.2v-9.6z" fill="%23f8f9fa"/></svg>');
        }
    

