/* 1. 基础全局设置 */
@import url('https://npm.elemecdn.com/lxgw-wenkai-screen-webfont/style.css');

* {
    font-family: "LXGW WenKai Screen", sans-serif !important;
}

#homepage-main-container, .flex-1.h-full.overflow-y-auto, main {
    background-color: transparent !important;
}

/* 2. 核心卡片样式：解决“偏黑”问题 + 性能优化版 */
div[class*="service"], div[class*="bookmark"], .relative.flex.flex-col {
    /* 静态属性 */
    backdrop-filter: blur(12px) brightness(1.2) !important; 
    -webkit-backdrop-filter: blur(12px) brightness(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    /* 关键优化：只过渡 位置 和 颜色，且时长缩短为 0.2s */
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.2s ease !important;
    
    /* 告诉浏览器提前准备好 GPU 渲染 */
    will-change: transform;
}

/* 3. 分模块精准染色：让卡片继承 YAML 里的颜色 */

/* 强制图标使用 YAML 定义的颜色，防止被主题覆盖 */
.service-icon, .bookmark-icon img, .bookmark-icon svg {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); /* 给图标加点淡淡的发光，防背景太花 */
}

/* 悬停时，利用卡片自身的颜色变量让边框发光 */
div[class*="service"]:hover, div[class*="bookmark"]:hover {
    /* 这里是个骚操作：如果 Homepage 没传变量，就用白色；如果有，就用对应色 */
    border-color: var(--color-primary, rgba(255,255,255,0.8)) !important;
    box-shadow: 0 0 15px var(--color-primary, rgba(255,255,255,0.2)) !important;
}

/* 让标题文字也染上一点颜色，不再是死板的白 */
.service-name, .bookmark-name {
    color: #eceff4 !important; /* 默认灰白 */
}

/* 4. 标题与悬停优化 */
.group-title {
    text-shadow: 0 4px 10px rgba(0,0,0,0.8) !important;
    font-weight: 800 !important;
}

/* 只有背景微微变亮，不再位移 */
div[class*="service"]:hover, div[class*="bookmark"]:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: none !important; /* 强制禁止位移 */
}
/* ==========================================================================
   5. 浅色背景适配：强制文字颜色变深
   ========================================================================== */

/* 1. 修改卡片标题（第一行大字）的颜色 */
.service-name,
.bookmark-name {
    /* 使用深炭黑色，比纯黑(#000)看起来更舒服，不刺眼 */
    color: #1a1a1a !important; 
    /* 极为重要：去掉之前可能为了深色背景设置的白色发光/阴影，否则文字会糊掉 */
    text-shadow: none !important;
    /* 可选：稍微加粗一点点，提高辨识度 */
    font-weight: 600 !important;
}

/* 2. 修改卡片描述（第二行小字）的颜色 */
.service-description,
.bookmark-description {
    /* 使用稍浅一点的深灰色，拉开层次感 */
    color: #4a4a4a !important;
    /* 同样去掉阴影 */
    text-shadow: none !important;
}

/* 3. (可选) 修改卡片组标题的颜色（如“办公辅助”那几个大字） */
/* 如果你觉得上面的大标题也看不清，把下面注释解开 */
/*
.group-title {
     color: #000000 !important;
     /* 这里的阴影可以保留，或者改成浅白色光晕以突出黑色文字 */
     text-shadow: 0 2px 4px rgba(255,255,255, 0.5) !important;
}
*/