/* 自定义工具类（原@layer utilities） */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    /* .btn-primary-effect 已移至 tailwind-config.js 作为标准工具类提供，此处不再定义 */
    /* .btn-primary-effect {
        @apply transform hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200;
    } */
    .transition-smooth {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scale-hover {
        @apply hover:scale-[1.02] active:scale-[0.98] transition-transform duration-200;
    }
    .tab-active {
        @apply text-primary font-medium border-b-2 border-primary transition-all duration-300;
    }
    .tab-inactive {
        @apply text-neutral border-b-2 border-transparent hover:text-primary/80 transition-all duration-300;
    }
    .nav-active {
        @apply text-primary transition-all duration-300;
    }
    .nav-inactive {
        @apply text-neutral hover:text-primary/80 transition-all duration-300;
    }
    .report-enter {
        @apply opacity-0 transform translate-y-4 transition-all duration-500 ease-out;
    }
    .report-enter-active {
        @apply opacity-100 transform translate-y-0;
    }
    .btn-check-active {
        @apply bg-primary text-white;
    }
    /*  Google 按钮样式 */
    .btn-google {
        background-color: #3B7A77; /* Google 蓝色 */
        color: white;
        outline: 2px dashed #3B7A77; /* 新增：添加虚线边框 */
        outline-offset: 2px; /* 可选：让虚线边框与按钮有一定距离，避免紧贴 */
    }
    .btn-google:hover {
        background-color: #057678; /* 稍深的蓝色 */
    }
    /* Google 图标颜色 */
    .btn-google .google-icon-blue { color: #3B7A77; }
    .btn-google .google-icon-red { color: #EA4335; }
    .btn-google .google-icon-yellow { color: #FBBC05; }
    .btn-google .google-icon-green { color: #34A853; }

    /* --- 新增：为订阅页面的标签页添加样式 --- */
    .plan-tab-item {
        @apply text-neutral font-medium transition-all duration-300; /* 基础样式 */
        position: relative;
        display: block;
        padding: 1rem 0.5rem; /* py-4 px-2 对应的数值 */
        text-decoration: none;
    }

    .plan-tab-item.active {
        @apply text-primary; /* 激活状态文字颜色 */
    }

    .plan-tab-item.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #3B7A77; /* 主色调青绿色 */
        transform: scaleX(1);
        transform-origin: center;
        transition: transform 0.3s ease-out;
    }

    .plan-tab-item:not(.active)::after {
        transform: scaleX(0);
    }

    .plan-tab-item:hover:not(.active) {
        @apply text-primary/80; /* 悬停时文字颜色变浅 */
    }
    /* --- 结束新增 --- */
}

/* 自定义滑块样式 */
input[type="range"] {
    width: 100%;
    height: 0.5rem;
    background-color: #e5e7eb;
    border-radius: 0.5rem;
    appearance: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background-color: #3B7A77;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(59, 122, 119, 0.1);
}

input[type="range"]::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background-color: #3B7A77;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(59, 122, 119, 0.1);
}

/* 底部导航动画 */
.nav-item i {
    transition: transform 0.2s ease;
}
.nav-item.active i {
    transform: scale(1.1);
}

/* 报告卡片hover特效增强 */
.report-card {
    transition: all 0.3s ease;
}
.report-card:hover {
    box-shadow: var(--tw-shadow-card-hover); /* 假设 --tw-shadow-card-hover 在 JS 配置中定义 */
    transform: translateY(-2px);
}
/*  自定义折叠动画样式  */
.collapse-enter {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}
.collapse-enter-active {
    opacity: 1;
    max-height: 1000px; /* 一个足够大的值 */
}

/* 卡片过渡动画 */
.card-transition {
    transition: all 0.3s ease;
}
.card-transition:hover {
    transform: translateY(-3px);
    box-shadow: var(--tw-shadow-card-hover); /* 确保此 CSS 变量已定义或替换为具体值 */
}

/* 进度条动画 */
.progress-animate {
    transition: width 1.5s ease-in-out;
}

/* .progress-animate {
  background-size: 200% 100%;
  animation: gradientMove 2s linear infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
} */

/* 数字增长动画 */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.count-animate {
    animation: countUp 0.8s ease-out forwards;
}

/* 底部导航图标动画 */
.nav-item i {
    transition: transform 0.2s ease;
}
.nav-item.nav-active i {
    transform: scale(1.15);
}

/* 按钮点击反馈 */
.check-btn {
    transition: all 0.2s ease;
}
.check-btn:active {
    transform: scale(0.9);
}

/* 订阅页内容卡片进入动画 */
.plan-card-enter {
    opacity: 0;
    transform: translateY(10px); /* 或其他起始位置 */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.plan-card-enter-active {
    opacity: 1;
    transform: translateY(0);
}
/* 自定义列表样式 */
ul.list-disc {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}
/* 图标与文本对齐微调 */
.flex.items-start .mr-4 {
    margin-top: 0.25rem;
}
.group:hover .fa {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}