/* ========== CSS 变量定义（全局样式变量） ========== */
        :root {
            /* 主色调 - 更专业的配色方案 */
            --primary: #1e88e5;          /* 主题蓝色，用于按钮、链接、重要元素 */
            --primary-dark: #1565c0;     /* 深蓝色，用于按钮悬停状态 */
            --secondary: #43a047;        /* 辅助绿色，用于成功状态、点缀 */
            --secondary-dark: #2e7d32;   /* 深绿色，辅助元素的悬停状态 */
            --accent: #f57c00;           /* 强调橙色，用于特殊高亮 */
            --accent-light: #ffb74d;     /* 浅橙色，强调元素的悬停 */
            
            /* 背景和卡片颜色（支持亮色/暗色双主题） */
            --bg-light: #f8fafc;         /* 亮色模式下的全局背景色 */
            --bg-dark: #121824;          /* 暗色模式下的全局背景色 */
            --card-light: #ffffff;       /* 亮色模式下的卡片背景（白色） */
            --card-dark: #1e2233;        /* 暗色模式下的卡片背景（深灰蓝） */
            --hover-light: rgba(0, 0, 0, 0.03);   /* 亮色模式悬停背景（极浅黑） */
            --hover-dark: rgba(255, 255, 255, 0.05); /* 暗色模式悬停背景（极浅白） */
            
            /* 文本颜色 */
            --text-primary-light: #2c3e50;    /* 亮色模式主要文字（深灰蓝） */
            --text-secondary-light: #546e7a;  /* 亮色模式次要文字（灰蓝） */
            --text-primary-dark: #ecf0f1;     /* 暗色模式主要文字（浅灰白） */
            --text-secondary-dark: #b0bec5;   /* 暗色模式次要文字（中灰色） */
            
            /* 边框和阴影 */
            --border-light: rgba(0, 0, 0, 0.08);   /* 亮色模式边框（浅灰） */
            --border-dark: rgba(255, 255, 255, 0.08); /* 暗色模式边框（极浅白） */
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);      /* 小阴影 */
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);      /* 中等阴影 */
            --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);     /* 大阴影 */
            --shadow-dark-sm: 0 2px 4px rgba(0, 0, 0, 0.15);  /* 暗色模式小阴影（更深些） */
            --shadow-dark-md: 0 4px 6px rgba(0, 0, 0, 0.18);  /* 暗色模式中阴影 */
            --shadow-dark-lg: 0 10px 25px rgba(0, 0, 0, 0.25);/* 暗色模式大阴影 */
            
            /* 圆角大小 */
            --radius-sm: 6px;    /* 小圆角 */
            --radius-md: 12px;   /* 中圆角 */
            --radius-lg: 16px;   /* 大圆角 */
            --radius-full: 9999px; /* 全圆角（变成圆形或胶囊） */
            
            /* 动画过渡时间 */
            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);    /* 快速动画 */
            --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);  /* 正常动画 */
            --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);     /* 慢速动画 */
            
            /* 全局字体栈 */
            --font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        /* ========== 全局重置样式 ========== */
        * {
            margin: 0;           /* 清除所有元素默认外边距 */
            padding: 0;         /* 清除所有元素默认内边距 */
            box-sizing: border-box; /* 盒子模型：宽高包含border和padding */
            -webkit-font-smoothing: antialiased;     /* 字体抗锯齿（WebKit） */
            -moz-osx-font-smoothing: grayscale;      /* 字体抗锯齿（Firefox） */
            font-family: var(--font-sans);           /* 统一使用自定义字体 */
            -webkit-tap-highlight-color: transparent; /* 移除移动端点击时的灰色高亮 */
        }

        html, body {
            height: 100%;  /* 让html和body占满整个屏幕高度 */
        }

        /* ========== Body 基础样式 ========== */
        body {
            background-color: var(--bg-light);                  /* 默认亮色背景 */
            color: var(--text-primary-light);                  /* 默认亮色文字 */
            font-size: 16px;                                   /* 基础字号 */
            line-height: 1.5;                                  /* 行高1.5倍 */
            transition: background-color var(--transition-normal), color var(--transition-normal); /* 主题切换时的平滑过渡 */
            overflow-x: hidden;                                /* 隐藏水平滚动条 */
        }

        /* 暗色模式覆盖样式（通过 .dark-mode 类触发） */
        body.dark-mode {
            background-color: var(--bg-dark);
            color: var(--text-primary-dark);
        }

        /* 内容容器：最大宽度1280px，左右居中，水平内边距24px */
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

        /* ========== 头部导航栏（固定顶部） ========== */
        .header {
            position: fixed;           /* 固定定位，始终悬浮在顶部 */
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100;             /* 高层级，避免被内容覆盖 */
            background-color: var(--bg-light);
            border-bottom: 1px solid var(--border-light);
            transition: background-color var(--transition-normal), border-color var(--transition-normal);
            box-shadow: var(--shadow-sm);
            backdrop-filter: blur(8px);        /* 背景模糊效果（毛玻璃） */
            -webkit-backdrop-filter: blur(8px); /* Safari兼容 */
        }

        /* 关键：因为头部固定，为body添加顶部内边距，防止内容被遮挡 */
        body {
            padding-top: 80px;
        }

        /* 暗色模式下的头部样式 */
        body.dark-mode .header {
            background-color: rgba(30, 34, 51, 0.9); /* 半透明深色背景 */
            border-bottom: 1px solid var(--border-dark);
            box-shadow: var(--shadow-dark-sm);
        }

        /* 头部内部布局：左右分布，垂直居中 */
        .header-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;        /* 头部高度70px */
        }

        /* Logo区域 */
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;           /* 内部元素间距12px */
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }

        /* Logo图标：圆形渐变背景 */
        .logo-icon {
            width: 40px;
            height: 40px;
            border-radius: var(--radius-full);
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: white;
            font-size: 18px;
        }

        /* Logo文字：渐变填充效果 */
        .logo-text {
            font-size: 20px;
            font-weight: 600;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* 导航链接容器 */
        .nav-links {
            display: flex;
            gap: 24px;
        }

        /* 单个导航链接 */
        .nav-link {
            color: var(--text-secondary-light);
            text-decoration: none;
            font-weight: 500;
            font-size: 15px;
            padding: 8px 0;
            position: relative;   /* 用于定位下划线伪元素 */
            transition: color var(--transition-fast);
        }

        body.dark-mode .nav-link {
            color: var(--text-secondary-dark);
        }

        /* 导航链接的下划线（伪元素） */
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;                 /* 默认宽度0，隐藏 */
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transition: width var(--transition-normal);
        }

        /* 悬停或激活状态：文字变主色，下划线展开 */
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }

        /* 头部右侧操作按钮组 */
        .header-actions {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        /* 通用头部图标按钮（搜索、主题切换、菜单） */
        .header-btn {
            border: none;
            background: none;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary-light);
            transition: all var(--transition-fast);
            background-color: var(--hover-light);
        }

        body.dark-mode .header-btn {
            color: var(--text-secondary-dark);
            background-color: var(--hover-dark);
        }

        .header-btn:hover {
            background-color: rgba(0, 0, 0, 0.07);
            color: var(--text-primary-light);
        }

        body.dark-mode .header-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: var(--text-primary-dark);
        }

        /* 商城按钮（特殊样式） */
        .shop-btn {
            border: none;
            background-color: var(--primary);
            color: white;
            cursor: pointer;
            padding: 8px 16px;
            border-radius: var(--radius-full);
            font-weight: 500;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: background-color var(--transition-fast);
        }
        .shop-btn:hover {
            background-color: var(--primary-dark);
        }

        /* 移动端菜单按钮（默认隐藏，屏幕<768px时显示） */
        .mobile-menu-btn {
            display: none;
        }

        /* ========== 主要内容区域 ========== */
        .main {
            padding: 40px 0;
            transition: margin-left var(--transition-normal);
        }

        /* Hero 宣传区（标题+描述） */
        .hero {
            text-align: center;
            margin-bottom: 48px;
            opacity: 0;                        /* 初始透明，用于入场动画 */
            transform: translateY(20px);       /* 初始下移20px */
            animation: fadeUp 0.8s forwards 0.3s; /* 执行fadeUp动画，0.3秒延迟后保持最终状态 */
        }

        .hero-title {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 16px;
            background: linear-gradient(90deg, var(--primary-dark), var(--secondary-dark));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-subtitle {
            font-size: 18px;
            color: var(--text-secondary-light);
            max-width: 600px;
            margin: 0 auto;
        }

        body.dark-mode .hero-subtitle {
            color: var(--text-secondary-dark);
        }

        /* 搜索框区域 */
        .search-bar {
            max-width: 600px;
            margin: 32px auto 0;
            position: relative;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.8s forwards 0.5s;
            margin-bottom: 36px;
        }

        /* 搜索输入框 */
        .search-input {
            width: 100%;
            height: 56px;
            padding: 0 24px;
            border-radius: var(--radius-full);
            border: 1px solid var(--border-light);
            background-color: var(--card-light);
            color: var(--text-primary-light);
            font-size: 16px;
            transition: all var(--transition-normal);
            box-shadow: var(--shadow-md);
        }

        body.dark-mode .search-input {
            border-color: var(--border-dark);
            background-color: var(--card-dark);
            color: var(--text-primary-dark);
            box-shadow: var(--shadow-dark-md);
        }

        .search-input:focus {
            outline: none;                         /* 移除默认轮廓 */
            box-shadow: 0 0 0 2px rgba(30, 136, 229, 0.3); /* 聚焦时蓝色光晕 */
        }

        /* 搜索按钮（放大镜图标） */
        .search-btn {
            position: absolute;
            right: 8px;
            top: 8px;
            width: 40px;
            height: 40px;
            border-radius: var(--radius-full);
            border: none;
            background-color: var(--primary);
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color var(--transition-fast);
        }
        .search-btn:hover {
            background-color: var(--primary-dark);
        }

        /* 工具卡片网格：响应式网格布局 */
        .tools-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 最少280px，自动填充 */
            gap: 24px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeUp 0.8s forwards 0.7s;
        }

        /* 单个工具卡片 */
        .tool-card {
            background-color: var(--card-light);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: all var(--transition-normal);
            box-shadow: var(--shadow-md);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            border: 1px solid var(--border-light);
        }

        body.dark-mode .tool-card {
            background-color: var(--card-dark);
            box-shadow: var(--shadow-dark-md);
            border-color: var(--border-dark);
        }

        .tool-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        body.dark-mode .tool-card:hover {
            box-shadow: var(--shadow-dark-lg);
        }

        /* 卡片内链接（使整个卡片可点击） */
        .tool-link {
            display: flex;
            flex-direction: column;
            height: 100%;
            text-decoration: none;
            color: inherit;
            padding: 24px;
        }

        /* 卡片头部：图标 + 标题区域 */
        .tool-header {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            gap: 16px;
        }

        /* 工具图标 */
        .tool-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: var(--shadow-sm);
            position: relative;
            overflow: hidden;
        }
        /* 图标上的半透明白色渐变（装饰） */
        .tool-icon::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
            z-index: 1;
        }

        .tool-title {
            flex: 1;
        }

        .tool-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
            color: var(--text-primary-light);
        }
        body.dark-mode .tool-name {
            color: var(--text-primary-dark);
        }

        /* 工具标签（如：热门推荐） */
        .tool-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: var(--radius-full);
            background-color: rgba(30, 136, 229, 0.1);
            color: var(--primary);
            font-size: 12px;
            font-weight: 500;
        }

        /* 工具描述文字 */
        .tool-description {
            font-size: 14px;
            color: var(--text-secondary-light);
            margin-bottom: 16px;
            line-height: 1.6;
            flex-grow: 1;   /* 占满剩余空间，保证底部对齐 */
        }

        /* 底部元信息：状态 + 使用次数 */
        .tool-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            color: var(--text-secondary-light);
            padding-top: 16px;
            border-top: 1px solid var(--border-light);
        }

        .tool-status {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* 绿色状态点 */
        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: var(--radius-full);
            background-color: var(--secondary);
        }

        .tool-usage {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* ========== 页脚 ========== */
        .footer {
            border-top: 1px solid var(--border-light);
            padding: 32px 0;
            margin-top: 40px;
        }

        .footer-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-links {
            display: flex;
            gap: 24px;
        }

        .footer-link {
            color: var(--text-secondary-light);
            text-decoration: none;
            font-size: 14px;
            transition: color var(--transition-fast);
        }
        .footer-link:hover {
            color: var(--primary);
        }

        .footer-copyright {
            color: var(--text-secondary-light);
            font-size: 14px;
        }

        /* ========== 页面加载动画（遮罩层） ========== */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-light);
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s, visibility 0.5s;
        }
        .loader.hidden {
            opacity: 0;
            visibility: hidden;  /* 隐藏后不可见且不占用交互 */
        }

        /* 旋转加载圆圈 */
        .spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(30, 136, 229, 0.3);
            border-radius: 50%;
            border-top-color: var(--primary);
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* ========== 背景装饰动画（柔和的渐变光晕） ========== */
        .bg-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;       /* 放在最底层 */
            pointer-events: none; /* 不干扰点击事件 */
            opacity: 0.5;
        }

        .bg-gradient {
            position: absolute;
            width: 50%;
            height: 60%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(30, 136, 229, 0.07) 0%, rgba(30, 136, 229, 0) 70%);
            transition: all 1s ease;
            opacity: 0;
            animation: fadeIn 1s forwards;
        }
        /* 第一块渐变（右上角） */
        .bg-gradient:nth-child(1) {
            top: -20%;
            right: -10%;
            animation-delay: 0.2s;
        }
        /* 第二块渐变（左下角，绿色调） */
        .bg-gradient:nth-child(2) {
            bottom: -20%;
            left: -10%;
            background: radial-gradient(circle, rgba(67, 160, 71, 0.07) 0%, rgba(67, 160, 71, 0) 70%);
            animation-delay: 0.5s;
        }

        /* ========== 主题切换动画（中间旋转圆环） ========== */
        .theme-switch-animation {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 120px;
            height: 120px;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 50%;
            z-index: 9998;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: transform 0.3s ease-out, opacity 0.3s ease-out;
        }
        .theme-switch-animation.active {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }

        .moon-icon, .sun-icon {
            width: 60px;
            height: 60px;
            display: none;
            animation: rotate 1s linear infinite;
        }
        .moon-icon.active, .sun-icon.active {
            display: block;
        }
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* ========== 响应式设计 ========== */
        /* 平板设备（宽度 ≤ 992px） */
        @media (max-width: 992px) {
            .hero-title { font-size: 28px; }
            .hero-subtitle { font-size: 16px; }
            .tools-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
            .nav-links { gap: 16px; }
        }

        /* 手机设备（宽度 ≤ 768px） */
        @media (max-width: 768px) {
            .header-inner { height: 60px; }
            .logo-icon { width: 36px; height: 36px; }
            
            /* 导航菜单默认隐藏，点击后显示为侧滑样式 */
            .nav-links {
                display: none;
                position: fixed;
                top: 60px;
                left: 0;
                width: 100%;
                background-color: var(--bg-light);
                border-bottom: 1px solid var(--border-light);
                padding: 16px 24px;
                flex-direction: column;
                gap: 16px;
                box-shadow: var(--shadow-md);
                z-index: 99;
                opacity: 0;
                transform: translateY(-10px);
                transition: opacity var(--transition-normal), transform var(--transition-normal);
            }
            .nav-links.active {
                display: flex;
                opacity: 1;
                transform: translateY(0);
            }
            .mobile-menu-btn {
                display: flex;   /* 显示菜单按钮 */
                margin-right: 8px;
            }
            
            .hero { margin-bottom: 32px; }
            .hero-title { font-size: 24px; }
            .hero-subtitle { font-size: 15px; }
            .search-input { height: 48px; }
            .search-btn { top: 4px; }
            .tools-grid { grid-template-columns: 1fr; gap: 16px; }
            .footer-inner { flex-direction: column; gap: 16px; }
            .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
            .shop-btn span { display: none; } /* 隐藏商城按钮文字，只保留图标 */
        }

        /* ========== 关键帧动画定义 ========== */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 点击波纹效果（用于按钮） */
        .ripple {
            position: absolute;
            border-radius: 50%;
            transform: scale(0);
            animation: ripple 0.6s linear;
            background-color: rgba(255, 255, 255, 0.7);
        }
        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
        
        /* ========== 分页组件样式（用于列表分页） ========== */
        /* 注意：此部分与前面有重复的全局重置，但无副作用 */
        /* 动态渐变文本样式（如“加载更多”或标题特效） */
        .waptxt {
            font-weight: 800;
            font-size: clamp(24px, 5vw, 60px); /* 响应式字体：最小24px，最大60px */
            letter-spacing: 3px;
            background-image: linear-gradient(to right, var(--accent), var(--secondary) 25%, var(--accent) 50%, var(--secondary) 75%, var(--accent));
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            background-size: 200% 100%;
            animation: masked-animation 8s infinite linear;
        }
        .waptxt:hover {
            animation-duration: 6s;
            background-image: linear-gradient(to right, var(--secondary), var(--accent-light) 25%, var(--secondary) 50%, var(--accent-light) 75%, var(--secondary));
        }
        @keyframes masked-animation {
            0% { background-position: 0 0; }
            100% { background-position: -100% 0; }
        }

        /* 分页按钮样式（Bootstrap风格） */
        .pagination .page-item .page-link {
            width: 40px;
            height: 40px;
            padding: 0;
            line-height: 40px;
            text-align: center;
            border-radius: var(--radius-sm);
            margin: 0 2px;
            transition: var(--transition-fast);
            position: relative;
            background-color: var(--card-light);
            color: var(--text-primary-light);
            border: 1px solid var(--border-light);
        }
        .pagination .page-item.active .page-link {
            background-color: var(--primary);
            border-color: var(--primary);
            color: white;
        }
        .pagination .page-item.disabled .page-link {
            opacity: 0.6;
        }
        .pagination .page-item:not(.disabled):not(.active) .page-link:hover {
            transform: scale(1.1);
            box-shadow: var(--shadow-sm);
            background-color: var(--hover-light);
        }

        /* 分页跳转输入框区域 */
        .pagination-jump {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }
        .pagination-jump span {
            margin-right: 10px;
            font-size: 16px;
            color: var(--text-secondary-light);
            font-weight: bold;
        }
        .pagination-jump input {
            width: auto;
            text-align: center;
            margin: 0 10px;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            padding: 8px;
            font-size: 16px;
            transition: var(--transition-fast);
        }
        .pagination-jump input:focus {
            border-color: var(--primary);
            outline: none;
        }
        .pagination-jump button {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: var(--radius-sm);
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
            transition: var(--transition-fast);
        }
        .pagination-jump button:hover {
            background-color: var(--primary-dark);
        }

        /* 工具提示（Tooltip）样式 */
        .page-link .tooltip {
            visibility: hidden;
            width: 120px;
            background-color: var(--card-dark);
            color: var(--text-primary-dark);
            text-align: center;
            border-radius: var(--radius-sm);
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: var(--transition-normal);
        }
        .page-link .tooltip::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: var(--card-dark) transparent transparent transparent;
        }
        .page-link:hover .tooltip {
            visibility: visible;
            opacity: 1;
        }

        /* ========== 搜索无结果提示样式 ========== */
        .no-results {
            text-align: center;
            padding: 30px 0;
            color: var(--text-secondary-light);
            font-size: 16px;
            background-color: var(--card-light);
            border-radius: var(--radius-lg);
            margin-top: 20px;
            box-shadow: var(--shadow-md);
        }
        body.dark-mode .no-results {
            color: var(--text-secondary-dark);
            background-color: var(--card-dark);
            box-shadow: var(--shadow-dark-md);
        }
        .no-results button {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: var(--radius-full);
            cursor: pointer;
            font-weight: 500;
            transition: background-color var(--transition-fast);
        }
        .no-results button:hover {
            background-color: var(--primary-dark);
        }
        .no-results .h4 {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .no-results .text-muted {
            color: var(--text-secondary-light);
            margin-bottom: 15px;
        }
        body.dark-mode .no-results .text-muted {
            color: var(--text-secondary-dark);
        }