@layer components {
    /* 基础字体设置 */
    body {
        @apply font-sans text-gray-800;
        font-family: 'Microsoft YaHei', sans-serif;
    }

    /* 卡片通用样式 */
    .analysis-card {
        @apply bg-white rounded-2xl shadow-lg p-6 transition-all duration-300;
        min-height: 420px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .analysis-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    }

    /* 图表容器响应式 */
    .chart-container {
        @apply w-full h-64 bg-gradient-to-br from-white to-gray-50 rounded-xl p-4;
    }

    /* 模块主题色 */
    .approval-theme {
        @apply bg-blue-50 text-blue-800;
    }
    
    .complaint-theme {
        @apply bg-red-50 text-red-800;
    }

    /* 悬停效果增强 */
    .hover-grow {
        @apply transition-transform duration-300 hover:scale-[1.02];
    }

    /* 排名列表项样式 */
    .ranking-item {
        @apply flex justify-between items-center px-4 py-3 rounded-lg 
               hover:bg-opacity-10 transition-all duration-300;
        transform-origin: center;
    }
    
    .ranking-item:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    }

    /* 响应式文字 */
    @screen md {
        .responsive-text {
            font-size: calc(1rem + 0.3vw);
        }
    }

    /* 顶部导航栏头像样式 */
    .avatar {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        overflow: hidden;
    }

    /* 调整导航栏布局 */
    nav {
        justify-content: space-between;
    }
}