<script setup lang="ts">
import {nextTick, onMounted, ref, computed} from "vue";
import FeedbackTicketButton from "../components/common/FeedbackTicketButton.vue";
import {TimeUtil} from "../lib/util";
import {TaskService} from "../service/TaskService";
import Router from "../router";
import {AllApps} from "./Apps/all";
import QrcodeWishImage from "../assets/image/qrcode-wish.png";
import {useUserStore} from "../store/modules/user";
import {useAuthStore} from "../store/modules/auth";
import {modelStore} from "../module/Model/store/model";

const userStore = useUserStore();
const authStore = useAuthStore();

const loading = ref(true);

const usageData = ref({
    soundGenerate: undefined as undefined | number,
    soundGenerateToday: undefined as undefined | number,
    soundAsr: undefined as undefined | number,
    soundAsrToday: undefined as undefined | number,
    videoGen: undefined as undefined | number,
    videoGenToday: undefined as undefined | number,
    taskTotal: undefined as undefined | number,
    taskTotalToday: undefined as undefined | number,
});

const doUrl = (url: string) => {
    if (url.startsWith("http")) {
        window.$mapi.app.openExternal(url);
    } else {
        Router.push(url);
    }
};

onMounted(async () => {
    await authStore.refreshAuthState();
    loading.value = false;
    nextTick(async () => {
        const todayStart = TimeUtil.formatDate(Date.now()) + " 00:00:00";
        const todayStartTimestamp = TimeUtil.datetimeToTimestamp(todayStart);
        usageData.value.soundGenerate = await TaskService.count("SoundGenerate");
        usageData.value.soundGenerateToday = await TaskService.count("SoundGenerate", todayStartTimestamp);
        usageData.value.soundAsr = await TaskService.count("SoundAsr");
        usageData.value.soundAsrToday = await TaskService.count("SoundAsr", todayStartTimestamp);
        usageData.value.videoGen = await TaskService.count("VideoGen");
        usageData.value.videoGenToday = await TaskService.count("VideoGen", todayStartTimestamp);
        usageData.value.taskTotal = await TaskService.count(null);
        usageData.value.taskTotalToday = await TaskService.count(null, todayStartTimestamp);
    });

    // TODO: 修复音色预缓存的类型定义问题
    // 暂时注释掉以避免渲染错误
    /*
    // 🎵 在后台触发音色预缓存初始化（不阻塞UI）
    try {
        // 从主进程获取initVoicePreCache函数（或直接触发）
        // 这里我们直接调用IPC方法来检查是否需要预缓存
        const checkResult = await window.$mapi.aliyun.cosyvoice.isAllVoicesCached();
        if (!checkResult.allCached) {
            console.log('[Home] 开始预缓存系统音色...');
            // 触发后台预缓存（不等待）
            window.$mapi.aliyun.cosyvoice.preCacheSystemVoices(
                // 获取API Key
                await (async () => {
                    try {
                        const store = modelStore;
                        await store.refreshBuildIn();
                        const provider = store.providers.find(p => p.id === 'dashscope');
                        return provider?.data?.apiKey || '';
                    } catch {
                        return '';
                    }
                })(),
                false
            ).then(() => {
                console.log('[Home] ✅ 音色预缓存完成');
            }).catch((error: any) => {
                console.warn('[Home] 音色预缓存失败:', error);
            });
        }
    } catch (error: any) {
        console.warn('[Home] 音色预缓存初始化失败:', error);
    }
    */
});
</script>

<template>
    <div class="home-page px-3 pt-0 pb-3 h-full overflow-hidden overflow-y-auto w-full">
        <div class="flex items-center mb-1">
            <div class="flex-grow">
                <div class="text-2xl font-bold">
                    {{ $t("欢迎使用 AI智能体 !") }}
                </div>
            </div>
            
            <!-- 用户信息显示 -->
            <div v-if="authStore.user?.username" class="flex items-center gap-3 mr-4">
                <div class="home-info-card rounded-lg px-4 py-2 shadow-sm flex items-center gap-3 border">
                    <div class="flex items-center gap-2">
                        <icon-user class="text-blue-500" />
                        <span class="font-medium text-gray-800">{{ authStore.user.username }}</span>
                    </div>
                    <template v-if="authStore.remainingDays !== undefined && authStore.remainingDays !== null">
                        <div class="w-px h-4 bg-gray-300"></div>
                        <div class="flex items-center gap-1 text-sm">
                            <icon-clock-circle />
                            <span class="text-gray-600">剩余:</span>
                            <span 
                                :class="authStore.remainingDays < 30 ? 'text-red-500 font-bold' : 'text-green-600 font-semibold'"
                            >
                                {{ authStore.remainingDays }} 天
                            </span>
                        </div>
                        <div class="w-px h-4 bg-gray-300"></div>
                        <div class="flex items-center gap-1 text-sm">
                            <icon-gift />
                            <span class="text-gray-600">积分:</span>
                            <span class="text-orange-500 font-semibold">
                                {{ authStore.userPoints }}
                            </span>
                        </div>
                    </template>
                </div>
            </div>
            
            <div>
                <a target="_blank" class="text-red-500 text-sm" href="https://060.cn/forum">
                    <icon-message class="mr-1" />
                    {{ $t("使用遇到问题？发帖求助") }}
                </a>
            </div>
        </div>
        <div class="mb-2">
            <div class="grid grid-cols-1 min-[500px]:grid-cols-3 gap-2 pb-top-area">
                <div class="home-card rounded-lg p-3 bg-contain bg-right bg-no-repeat hover:shadow-xl transition-all">
                    <div class="home-hero-title font-bold text-lg mb-1" style="color: var(--theme-text-primary);">{{ $t("一键IP智能体") }}</div>
                    <div class="home-hero-desc h-10 text-sm text-gray-500 mb-2" style="color: var(--theme-text-secondary);">
                        全流程自动化视频创作
                    </div>
                    <div>
                        <a-button type="primary" size="small" @click="$router.push('/video?tab=ipAgent')">
                            {{ $t("立即使用") }}
                        </a-button>
                    </div>
                </div>
                <div class="home-card rounded-lg p-3 bg-contain bg-right bg-no-repeat hover:shadow-xl transition-all">
                    <div class="home-hero-title font-bold text-lg mb-1" style="color: var(--theme-text-primary);">{{ $t("声音合成") }}</div>
                    <div class="home-hero-desc h-10 text-sm text-gray-500 mb-2" style="color: var(--theme-text-secondary);">
                        {{ $t("上千种音色模型支持") }}
                    </div>
                    <div>
                        <a-button type="primary" size="small" @click="$router.push('/sound?tab=soundGenerate')">
                            {{ $t("立即使用") }}
                        </a-button>
                    </div>
                </div>
                <div class="home-card rounded-lg p-3 bg-contain bg-right bg-no-repeat hover:shadow-xl transition-all">
                    <div class="home-hero-title font-bold text-lg mb-1" style="color: var(--theme-text-primary);">{{ $t("语音识别") }}</div>
                    <div class="home-hero-desc h-10 text-sm text-gray-500 mb-2" style="color: var(--theme-text-secondary);">
                        {{ $t("识别文件下载文本/字幕") }}
                    </div>
                    <div>
                        <a-button type="primary" size="small" @click="$router.push('/sound?tab=soundAsr')">
                            {{ $t("立即使用") }}
                        </a-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-card rounded-lg p-3 mb-2 hover:shadow-xl transition-all">
            <div class="text-lg font-bold mb-3 flex items-center">
                <icon-bar-chart class="mr-2" />
                {{ $t("数据统计") }}
            </div>
            <div class="grid grid-cols-2 min-[700px]:grid-cols-4 gap-2">
                <div>
                    <div class="text-sm text-gray-600 mb-2">
                        {{ $t("声音合成") }}
                    </div>
                    <div class="font-bold text-xl mb-2">
                        <a-statistic animation placeholder="-" :value="usageData.soundGenerate as any" />
                    </div>
                    <div class="text-sm">
                        {{ $t("今日") }} +
                        <a-statistic
                            animation
                            placeholder="-"
                            :value-style="{
                                color:
                                    usageData.soundGenerateToday && usageData.soundGenerateToday > 0 ? 'green' : 'gray',
                                fontSize: '13px',
                            }"
                            :value="usageData.soundGenerateToday as any"
                        />
                    </div>
                </div>
                <div>
                    <div class="text-sm text-gray-600 mb-2">
                        {{ $t("语音识别") }}
                    </div>
                    <div class="font-bold text-xl mb-2">
                        <a-statistic animation placeholder="-" :value="usageData.soundAsr as any" />
                    </div>
                    <div class="text-sm">
                        {{ $t("今日") }} +
                        <a-statistic
                            animation
                            placeholder="-"
                            :value-style="{
                                color: usageData.soundAsrToday && usageData.soundAsrToday > 0 ? 'green' : 'gray',
                                fontSize: '13px',
                            }"
                            :value="usageData.soundAsrToday as any"
                        />
                    </div>
                </div>
                <div>
                    <div class="text-sm text-gray-600 mb-2">
                        {{ $t("数字人合成") }}
                    </div>
                    <div class="font-bold text-xl mb-2">
                        <a-statistic animation placeholder="-" :value="usageData.videoGen as any" />
                    </div>
                    <div class="text-sm">
                        {{ $t("今日") }} +
                        <a-statistic
                            animation
                            placeholder="-"
                            :value-style="{
                                color: usageData.videoGenToday && usageData.videoGenToday > 0 ? 'green' : 'gray',
                                fontSize: '13px',
                            }"
                            :value="usageData.videoGenToday as any"
                        />
                    </div>
                </div>
                <div>
                    <div class="text-sm text-gray-600 mb-2">
                        {{ $t("今日总任务") }}
                    </div>
                    <div class="font-bold text-xl mb-2">
                        <a-statistic animation placeholder="-" :value="usageData.taskTotal as any" />
                    </div>
                    <div class="text-sm">
                        {{ $t("今日") }} +
                        <a-statistic
                            animation
                            placeholder="-"
                            :value-style="{
                                color: usageData.taskTotalToday && usageData.taskTotalToday > 0 ? 'green' : 'gray',
                                fontSize: '13px',
                            }"
                            :value="usageData.taskTotalToday as any"
                        />
                    </div>
                </div>
            </div>
        </div>
        <!-- 工具说明 -->
        <div class="home-card rounded-lg p-3 mb-2 hover:shadow-xl transition-all">
            <div class="text-lg font-bold mb-3 flex items-center">
                <icon-book class="mr-2" />
                {{ $t("工具说明") }}
            </div>
            <div class="grid grid-cols-1 min-[600px]:grid-cols-2 gap-3">
                <!-- 使用步骤 -->
                <div>
                    <div class="font-semibold text-sm mb-2 flex items-center text-blue-400">
                        <icon-thunder class="mr-1" />
                        本工具使用超级简单
                    </div>
                    <ol class="text-xs text-gray-300 space-y-2 list-decimal list-inside leading-relaxed">
                        <li>去<span class="text-blue-400 font-medium">形象</span>里面添加一个自己的形象，要求能看清嘴巴、不低于20秒。</li>
                        <li>去<span class="text-blue-400 font-medium">首页 → 智能体配置 → 模型设置</span>，分别把文本模型、声音模型、声音识别模型、数字人模型选好。</li>
                        <li>在首页依次：<span class="text-green-400 font-medium">生成文案 → 生成语音 → 生成视频 → 视频编辑 → 生成标题 → 生成字幕 → 封面 → 发布</span>。</li>
                        <li>也可以用文案进行<span class="text-yellow-400 font-medium">一键爆款生成</span>，等于自动按顺序执行前面所有步骤。</li>
                        <li>在<span class="text-blue-400 font-medium">首页 → 智能体配置 → 字幕设置</span>可以选择字幕模板/自定义字幕模板；<span class="text-blue-400 font-medium">封面设置</span>可以选择封面/自定义封面模板。</li>
                    </ol>
                </div>
                <!-- 工具优势 -->
                <div>
                    <div class="font-semibold text-sm mb-2 flex items-center text-emerald-400">
                        <icon-star class="mr-1" />
                        优势
                    </div>
                    <ol class="text-xs text-gray-300 space-y-1 list-decimal list-inside leading-relaxed">
                        <li><span class="text-emerald-400 font-medium">丰富音色：</span>内置多种音色，支持多国语言、方言，语音效果极佳。</li>
                        <li><span class="text-emerald-400 font-medium">强大字幕：</span>置顶字幕、关键词特效字幕、普通字幕分别自定义字体、颜色、描边、阴影，特效支持动画音效。</li>
                        <li><span class="text-emerald-400 font-medium">画中画：</span>固定/关键词/字幕，三种模式，支持目录素材、指定素材、全屏、原视频最小化、自定义布局等玩法。</li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="home-card rounded-lg p-3 mb-2">
            <div class="text-lg font-bold mb-3 flex items-center">
                <icon-tool class="mr-2" />
                {{ $t("应用工具") }}
            </div>
            <div class="grid grid-cols-1 min-[600px]:grid-cols-3 gap-2">
                <!-- 工具需求（二维码） -->
                <div class="app-tool-card rounded-lg border hover:shadow-xl cursor-pointer transition-all p-3 flex flex-col items-center">
                    <div class="font-bold text-base mb-1">{{ $t("工具需求") }}</div>
                    <div class="text-xs text-gray-500 mb-2 text-center">
                        {{ $t("更多工具提交需求关注我们") }}
                    </div>
                    <div class="w-40 h-40 border border-gray-600 rounded-lg overflow-hidden bg-gray-800 flex items-center justify-center">
                        <img
                            :src="QrcodeWishImage"
                            alt="工具需求二维码"
                            class="w-full h-full object-contain"
                        />
                    </div>
                </div>

                <!-- 更新日志 -->
                <div class="col-span-2 home-card rounded-lg border p-4 hover:shadow-xl cursor-default">
                    <div class="flex items-center justify-between mb-2">
                        <div class="font-bold text-base flex items-center">
                            <icon-history class="mr-2" />
                            更新日志
                        </div>
                    </div>
                    <div class="overflow-y-auto max-h-48 space-y-3 pr-2">
                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <div class="font-semibold text-sm">v4.0.0</div>
                                <div class="text-xs text-gray-500">2026-04-19</div>
                            </div>
                            <ul class="text-xs text-gray-700 space-y-1 list-disc list-inside leading-relaxed">
                                <li><span class="font-semibold text-green-600">极速模型：</span>速度更快，效果更好</li>
                                <li><span class="font-semibold text-red-600">爆款文案：</span>重做爆款文案生成，一次可以生成三个文案</li>
                                <li><span class="font-semibold text-orange-600">清淡 UI：</span>全新清淡界面上线</li>
                                <li><span class="font-semibold text-blue-600">画中画升级：</span>增加素材管理和字幕多选插入</li>
                                <li><span class="font-semibold text-purple-600">字幕模板：</span>新增 8 套关键词高亮模板</li>
                                <li><span class="font-semibold text-indigo-600">内置形象：</span>内置 3 个形象</li>
                            </ul>
                        </div>
                        <div class="border-t pt-2">
                            <div class="flex items-center justify-between mb-2">
                                <div class="font-semibold text-sm">v2.0.0</div>
                                <div class="text-xs text-gray-500">2026-03-04</div>
                            </div>
                            <ul class="text-xs text-gray-700 space-y-1 list-disc list-inside leading-relaxed">
                                <li><span class="font-semibold text-green-600">文本模型升级：</span>更新为豆包2.0，更快更聪明</li>
                                <li><span class="font-semibold text-blue-600">BGM试听：</span>UI上增加了BGM试听功能</li>
                                <li><span class="font-semibold text-purple-600">字幕模式增强：</span>画中画支持字幕模式分行指定插入素材</li>
                                <li><span class="font-semibold text-orange-600">关键词优化：</span>优化了关键词字幕，一条视频里只会触发一次</li>
                                <li><span class="font-semibold text-red-600">AI法务验证：</span>增加了AI法务验证文案里是否有违禁词</li>
                                <li><span class="font-semibold text-indigo-600">数字人升级：</span>更新了数字人云端模型plus，更清晰速度更快</li>
                            </ul>
                        </div>
                        <div class="border-t pt-2">
                            <div class="flex items-center justify-between mb-2">
                                <div class="font-semibold text-sm">v1.9.0</div>
                                <div class="text-xs text-gray-500">2026-02-07</div>
                            </div>
                            <ul class="text-xs text-gray-700 space-y-1 list-disc list-inside leading-relaxed">
                                <li><span class="font-semibold text-green-600">云端模型2：</span>增加了云端模型2，更快的生成速度</li>
                                <li><span class="font-semibold text-blue-600">文件限制提升：</span>将数字人形象素材文件的大小限制从30M提升至100M</li>
                                <li><span class="font-semibold text-purple-600">稳定性优化：</span>修复了视频生成完成后显示失败的问题</li>
                            </ul>
                        </div>
                        <div class="border-t pt-2">
                            <div class="flex items-center justify-between mb-2">
                                <div class="font-semibold text-sm">v1.8.0</div>
                                <div class="text-xs text-gray-500">2026-01-14</div>
                            </div>
                            <ul class="text-xs text-gray-700 space-y-1 list-disc list-inside leading-relaxed">
                                <li><span class="font-semibold text-red-600">UI重构：</span>全面升级重做了UI页面，体验更流畅</li>
                                <li><span class="font-semibold text-blue-600">字幕模板：</span>重做字幕模板板块，增加了字幕模板实时预览功能</li>
                                <li><span class="font-semibold text-purple-600">封面模板：</span>重做了封面模板板块，增加了封面模板实时预览功能</li>
                            </ul>
                        </div>
                        <div class="border-t pt-2">
                            <div class="flex items-center justify-between mb-2">
                                <div class="font-semibold text-sm">v1.7.0</div>
                                <div class="text-xs text-gray-500">2026-01-09</div>
                            </div>
                            <ul class="text-xs text-gray-700 space-y-1 list-disc list-inside leading-relaxed">
                                <li><span class="font-semibold text-blue-600">云端数字人：</span>没有显卡的用户可以选择云端数字人，本地3060以上的显卡用本地模型会比云端快</li>
                                <li><span class="font-semibold text-purple-600">封面预览：</span>更新了封面图片预览功能优化</li>
                                <li><span class="font-semibold text-green-600">多语言支持：</span>新增声音合成对多语言及方言的支持（如英语、日语、四川话等）</li>
                                <li><span class="font-semibold text-orange-600">视频对比：</span>新增视频生成后的预览与原视频对比功能</li>
                            </ul>
                        </div>
                        <div class="border-t pt-2">
                            <div class="flex items-center justify-between mb-2">
                                <div class="font-semibold text-sm">v1.6.0</div>
                                <div class="text-xs text-gray-500">2026-01-04</div>
                            </div>
                            <ul class="text-xs text-gray-700 space-y-1 list-disc list-inside leading-relaxed">
                                <li><span class="font-semibold text-red-600">大模型升级：</span>程序集成了满血版豆包2.0-mini大模型，AI能力显著提升</li>
                                <li><span class="font-semibold text-blue-600">云服务升级：</span>升级了系统内置语音识别、语音生成的云模型，识别更准确、合成更自然</li>
                                <li><span class="font-semibold text-green-600">素材扩充：</span>增加了更多的背景音乐（BGM），覆盖情感、新闻、知识科普、营销、通用等多个类型</li>
                            </ul>
                        </div>
                        <div class="border-t pt-2">
                            <div class="flex items-center justify-between mb-2">
                                <div class="font-semibold text-sm">v1.5.0</div>
                                <div class="text-xs text-gray-500">2025-12-28</div>
                            </div>
                            <ul class="text-xs text-gray-700 space-y-1 list-disc list-inside leading-relaxed">
                                <li><span class="font-semibold text-blue-600">画中画：</span>增加了全屏原视频最小化功能，可以在插入全屏素材时将原来的口播视频圆形/房型显示在画面各个位置</li>
                                <li><span class="font-semibold text-purple-600">字幕特效：</span>增加了弹幕满屏、强力闪烁、弧形文字等更多的动画字幕特效</li>
                                <li><span class="font-semibold text-green-600">音效系统：</span>增加了特效字幕音效功能，可以对每个特效分别设置音效以及上传自定义音效</li>
                                <li><span class="font-semibold text-orange-600">算法优化：</span>优化了封面人像抠图模块的算法，优化了激活码指纹识别生成的算法</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.home-page {
    background: linear-gradient(180deg, #1a1d25 0%, #151820 100%);
    color: #e5e7eb;
}

.home-card {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.95) 0%, rgba(20, 25, 35, 0.95) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

    &:hover {
        border-color: rgba(59, 130, 246, 0.4);
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
    }

    .font-bold {
        color: #f3f4f6;
    }

    .text-gray-500 {
        color: #9ca3af;
    }

    .text-gray-600 {
        color: #9ca3af;
    }
}

.home-info-card {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.9) 0%, rgba(20, 25, 35, 0.9) 100%);
    border-color: rgba(59, 130, 246, 0.3);

    .text-gray-800 {
        color: #e5e7eb;
    }

    .text-gray-600 {
        color: #9ca3af;
    }

    .bg-gray-300 {
        background-color: rgba(75, 85, 99, 0.5);
    }
}

.app-tool-card {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.95) 0%, rgba(20, 25, 35, 0.95) 100%);
    border-color: rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;

    &:hover {
        border-color: rgba(59, 130, 246, 0.4);
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
    }

    .font-bold {
        color: #f3f4f6;
    }

    .text-gray-500 {
        color: #9ca3af;
    }

    .text-gray-400 {
        color: #9ca3af;
    }
}

.pb-top-area > div {
    background-size: 2.5rem;
    background-position: 95% center;
    background-repeat: no-repeat;

    &:nth-child(1) {
        background-image: url(./../assets/image/icon/videoGen.png);
    }

    &:nth-child(2) {
        background-image: url(./../assets/image/icon/soundGenerate.png);
    }

    &:nth-child(3) {
        background-image: url(./../assets/image/icon/soundAsr.png);
    }

}

:deep(.text-gray-700) {
    color: #d1d5db !important;
}

:deep(.text-gray-600) {
    color: #9ca3af !important;
}

:deep(.border-t) {
    border-color: rgba(59, 130, 246, 0.2) !important;
}

/* 数据统计数字颜色 */
:deep(.arco-statistic) {
    .arco-statistic-value {
        color: #f3f4f6 !important;
    }
}

.home-card,
.home-info-card,
.app-tool-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.home-card::before,
.home-info-card::before,
.app-tool-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        120deg,
        rgba(59, 130, 246, 0.12),
        rgba(168, 85, 247, 0.34),
        rgba(56, 189, 248, 0.24),
        rgba(59, 130, 246, 0.12)
    );
    background-size: 220% 220%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.42;
    pointer-events: none;
    animation: home-card-orbit 8s linear infinite;
}

.home-card::after,
.home-info-card::after,
.app-tool-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 32%),
        radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.08), transparent 26%);
    pointer-events: none;
    z-index: 0;
}

.home-card > *,
.home-info-card > *,
.app-tool-card > * {
    position: relative;
    z-index: 1;
}

@keyframes home-card-orbit {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

:global(body[data-theme="soft-light"]) .home-page {
    background:
        radial-gradient(circle at top left, rgba(96, 123, 244, 0.12), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(223, 191, 255, 0.16), transparent 24%),
        linear-gradient(180deg, rgba(248, 246, 255, 0.95) 0%, rgba(237, 239, 255, 0.97) 100%);
}

:global(body[data-theme="soft-light"]) .home-card,
:global(body[data-theme="soft-light"]) .home-info-card,
:global(body[data-theme="soft-light"]) .app-tool-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 244, 255, 0.98) 100%);
    border-color: rgba(118, 135, 167, 0.24);
    box-shadow: 0 22px 54px rgba(104, 110, 170, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

:global(body[data-theme="soft-light"]) .home-card::before,
:global(body[data-theme="soft-light"]) .home-info-card::before,
:global(body[data-theme="soft-light"]) .app-tool-card::before {
    opacity: 0.88;
}

:global(body[data-theme="soft-light"]) .home-card:hover,
:global(body[data-theme="soft-light"]) .app-tool-card:hover {
    transform: translateY(-1px);
    box-shadow:
        0 28px 60px rgba(104, 110, 170, 0.18),
        0 0 0 1px rgba(106, 116, 247, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

:global(body[data-theme="soft-light"]) .home-card .font-bold,
:global(body[data-theme="soft-light"]) .home-info-card .font-medium,
:global(body[data-theme="soft-light"]) .app-tool-card .font-bold {
    color: #182235;
}

:global(body[data-theme="soft-light"]) .home-page .pb-top-area > .home-card > .home-hero-title {
    color: #1e274c !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

:global(body[data-theme="soft-light"]) .home-page .pb-top-area > .home-card > .home-hero-desc {
    color: #5a6791 !important;
    opacity: 1 !important;
}

:global(body[data-theme="soft-light"]) .home-card .text-gray-500,
:global(body[data-theme="soft-light"]) .home-card .text-gray-600,
:global(body[data-theme="soft-light"]) .home-info-card .text-gray-600,
:global(body[data-theme="soft-light"]) .app-tool-card .text-gray-500,
:global(body[data-theme="soft-light"]) .app-tool-card .text-gray-400 {
    color: #56618b;
}

:global(body[data-theme="soft-light"]) .home-page .text-2xl,
:global(body[data-theme="soft-light"]) .home-page .text-lg,
:global(body[data-theme="soft-light"]) .home-page .font-bold,
:global(body[data-theme="soft-light"]) .home-page .font-semibold {
    color: #1d2547 !important;
}

:global(body[data-theme="soft-light"]) .home-page .text-sm,
:global(body[data-theme="soft-light"]) .home-page .text-xs,
:global(body[data-theme="soft-light"]) .home-page .text-gray-600,
:global(body[data-theme="soft-light"]) .home-page .text-gray-500,
:global(body[data-theme="soft-light"]) .home-page .text-gray-400,
:global(body[data-theme="soft-light"]) .home-page .text-gray-300,
:global(body[data-theme="soft-light"]) .home-page ol,
:global(body[data-theme="soft-light"]) .home-page ul,
:global(body[data-theme="soft-light"]) .home-page p {
    color: #5f6b93 !important;
}

:global(body[data-theme="soft-light"]) .home-page .text-red-500 {
    color: #c85b6b !important;
}

:global(body[data-theme="soft-light"]) .home-page .text-blue-400,
:global(body[data-theme="soft-light"]) .home-page .text-blue-500 {
    color: #4f63e8 !important;
}

:global(body[data-theme="soft-light"]) .home-page .text-green-400,
:global(body[data-theme="soft-light"]) .home-page .text-green-600,
:global(body[data-theme="soft-light"]) .home-page .text-emerald-400 {
    color: #17806d !important;
}

:global(body[data-theme="soft-light"]) .home-page .text-yellow-400,
:global(body[data-theme="soft-light"]) .home-page .text-orange-500,
:global(body[data-theme="soft-light"]) .home-page .text-orange-600 {
    color: #b87419 !important;
}

:global(body[data-theme="soft-light"]) .home-page .text-purple-600,
:global(body[data-theme="soft-light"]) .home-page .text-indigo-600,
:global(body[data-theme="soft-light"]) .home-page .text-teal-600 {
    color: #6557d2 !important;
}

:global(body[data-theme="soft-light"]) .home-page .border-gray-600,
:global(body[data-theme="soft-light"]) .home-page .border-gray-300,
:global(body[data-theme="soft-light"]) .home-page .border-gray-200 {
    border-color: rgba(132, 142, 220, 0.26) !important;
}

:global(body[data-theme="soft-light"]) .home-page .bg-gray-800,
:global(body[data-theme="soft-light"]) .home-page .bg-gray-200,
:global(body[data-theme="soft-light"]) .home-page .bg-gray-100 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 245, 255, 0.97) 100%) !important;
}

:global(body[data-theme="soft-light"]) .home-page :deep(.arco-statistic-value),
:global(body[data-theme="soft-light"]) .home-page :deep(.arco-statistic-content .arco-statistic-value) {
    color: #1f2749 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
}

:global(body[data-theme="soft-light"]) .home-page :deep(.arco-statistic-title),
:global(body[data-theme="soft-light"]) .home-page :deep(.arco-statistic-prefix) {
    color: #5f6b93 !important;
}

:global(body[data-theme="soft-light"]) .home-page .app-tool-card .font-bold,
:global(body[data-theme="soft-light"]) .home-page .home-card .font-bold.text-base,
:global(body[data-theme="soft-light"]) .home-page .home-card .font-semibold.text-sm,
:global(body[data-theme="soft-light"]) .home-page .home-card .text-sm.text-gray-600,
:global(body[data-theme="soft-light"]) .home-page .home-card .text-sm.text-gray-500,
:global(body[data-theme="soft-light"]) .home-page .home-card .text-xs.text-gray-500,
:global(body[data-theme="soft-light"]) .home-page .home-card .text-xs.text-gray-700 {
    color: #1f2749 !important;
}

:global(body[data-theme="soft-light"]) .home-page .home-card ul.text-xs.text-gray-700,
:global(body[data-theme="soft-light"]) .home-page .home-card ul.text-xs.text-gray-700 li,
:global(body[data-theme="soft-light"]) .home-page .home-card .text-xs.text-gray-500,
:global(body[data-theme="soft-light"]) .home-page .app-tool-card .text-xs.text-gray-500 {
    color: #5f6b93 !important;
}

:global(body[data-theme="soft-light"]) .home-page .app-tool-card [class*="bg-gray-800"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 245, 255, 0.97) 100%) !important;
    border-color: rgba(132, 142, 220, 0.24) !important;
}
</style>
