/* 全局样式 - 统一页面基础布局、响应式适配、核心组件样式 */
/* 1. 基础视口与布局初始化 */
html, body {
    height: 100%; /* 让根元素和body占满整个视口高度，为垂直布局打基础 */
}
body {
    background: #eee; /* 页面全局背景色（浅灰），统一视觉基调 */
    color: #444; /* 全局默认文字颜色（深灰），保证可读性 */
    display: flex; /* 开启flex垂直布局，实现「头部-主体-底部」自适应 */
    flex-direction: column; /* 子元素垂直排列 */
}

/* 2. 清除浮动工具类 - 解决浮动导致的父容器高度塌陷问题 */
.zr-clear {
    clear: both; /* 清除左右两侧浮动影响 */
}

/* 3. 页面主体容器 - 避开顶部固定导航，占据剩余空间 */
.zr-body {
    margin-top: 75px; /* 顶部间距=导航高度（64px）+ 预留间距，避免内容被导航遮挡 */
    flex: 1 0 auto; /* flex属性：1=占满剩余垂直空间，0=不缩小，auto=基础尺寸自适应 */
}

/* 4. 内容包裹容器 - 控制页面最大宽度，居中显示 */
.zr-container {
    margin: 0 10px; /* 小屏时左右留10px边距，提升移动端体验 */
    position: relative; /* 相对定位，作为子元素绝对定位的参考 */
}

/* 5. 主内容区（左右分栏父容器）- 默认小屏堆叠，大屏分栏 */
.zr-main {
    margin-top: 15px; /* 与上方内容间距 */
    width: 100%; /* 占满父容器宽度 */
    position: relative; /* 相对定位，适配子元素布局 */
}

/* 主内容区-左侧栏 - 默认小屏占满宽度（堆叠显示） */
.zr-main > .zr-main-left {
    width: 100%;
    float: left; /* 小屏时浮动不影响，大屏会被flex覆盖 */
}

/* 主内容区-右侧栏 - 默认小屏占满宽度（堆叠显示） */
.zr-main > .zr-main-right {
    width: 100%;
    float: right; /* 小屏时浮动不影响，大屏会被flex覆盖 */
}

/* 响应式适配：小屏幕（平板，≥768px）- 两栏并列（右侧多模块双列） */
@media (min-width: 768px) {
    .zr-container {
        width: 738px; /* 固定容器宽度，居中显示（减去左右潜在间距） */
        margin: 0 auto; /* 水平居中 */
    }

    /* 右侧栏内的模块 - 双列布局 */
    .zr-main > .zr-main-right > .zr-module {
        width: 45%; /* 每个模块占45%宽度，预留间距 */
        margin-bottom: 15px; /* 模块之间垂直间距 */
    }

    .zr-main > .zr-main-right > .zr-module:nth-child(odd) {
        float: left; /* 奇数模块靠左浮动 */
        clear: left; /* 清除左侧浮动，避免换行错乱 */
    }

    /* 最后一个奇数模块特殊处理 - 若只有单个，自动占满宽度 */
    .zr-main > .zr-main-right > .zr-module:nth-child(odd).zr-module:last-child {
        width: auto; /* 取消固定宽度，自适应父容器 */
        float: none; /* 取消浮动，居中显示 */
        clear: both; /* 清除所有浮动影响 */
    }

    .zr-main > .zr-main-right > .zr-module:nth-child(even) {
        float: right; /* 偶数模块靠右浮动 */
        clear: right; /* 清除右侧浮动，避免换行错乱 */
    }

    #banner { 
        height: 150px; /* 小屏平板下，banner图固定高度 */
    }
}

/* 响应式适配：中等屏幕（桌面显示器，≥992px）- 左右分栏+右侧粘性定位 */
@media (min-width: 992px) {
    .zr-container {
        width: 992px; /* 桌面端固定容器宽度，提升阅读体验 */
    }

    /* 左侧栏占80%宽度，右侧栏占29%（预留1%间距） */
    .zr-main > .zr-main-left {
        width: 80%;
    }
    .zr-main > .zr-main-right {
        width: 29%;
    }

    /* 右侧栏内模块 - 取消双列，垂直堆叠 */
    .zr-main > .zr-main-right > .zr-module {
        width: auto; /* 自适应父容器宽度 */
        float: none !important; /* 强制取消浮动，优先级最高 */
    }

    /* 父容器切换为flex布局 - 替代float，实现更稳定的分栏 */
    .zr-main {
        margin-top: 15px;
        width: 100%;
        position: relative;
        display: flex; /* 开启flex，子元素水平排列 */
        gap: 10px; /* 左右栏之间的间距（无需计算margin） */
    }

    /* 右侧侧边栏 - 粘性定位（滚动时固定在顶部） */
    .zr-main-right {
        align-self: flex-start; /* 避免被左侧内容拉伸高度 */
        position: sticky; /* 粘性定位：滚动到指定位置后固定 */
        top: 70px; /* 固定位置=导航高度+预留间距，避免与导航重叠 */
    }
}

/* 响应式适配：大屏幕（大桌面显示器，≥1200px）- 加宽容器，保持布局逻辑 */
@media (min-width: 1200px) {
    .zr-container {
        width: 1200px; /* 大屏下加宽容器，适配更大屏幕 */
    }

    /* 保持flex分栏布局，仅调整间距 */
    .zr-main {
        margin-top: 10px; /* 减小顶部间距，适配大屏视觉比例 */
        width: 100%;
        position: relative;
        display: flex; /* flex布局保证分栏稳定 */
        gap: 10px; /* 左右栏间距 */
    }

    /* 右侧侧边栏 - 保持粘性定位，与中等屏幕逻辑一致 */
    .zr-main-right {
        align-self: flex-start; /* 防止拉伸 */
        position: sticky;
        top: 70px; /* 与导航高度匹配，避免重叠 */
    }
}
/* 全局样式END */

/*顶部导航*/
/* 顶部导航整体样式 - 固定在页面顶部，占满宽度 */
.zr-nav {
    width: 100%; /* 宽度全屏 */
    height: 64px; /* 导航固定高度 */
    position: fixed; /* 固定定位，不随滚动移动 */
    top: 0; /* 距离顶部0距离 */
    backdrop-filter: saturate(2) blur(15px); /* 背景饱和+模糊效果，增强视觉层次 */
    background: rgba(245, 245, 245, 0.75); /* 浅灰半透明背景，兼顾通透感和辨识度 */
    z-index: 1000; /* 层级最高，避免被其他元素覆盖 */
}

/* 导航菜单容器 - 仅大屏显示，居中布局 */
.zr-nav .layui-nav {
    position: absolute; /* 绝对定位，基于父容器.zr-nav */
    top: 0; /* 顶部对齐 */
    left: 16%; /* 左侧偏移，控制菜单水平位置 */
    background: none; /* 取消默认背景 */
    display: none; /* 默认隐藏，大屏下通过媒体查询显示 */
    text-align: center; /* 菜单项居中 */
}

/* 导航菜单项 - 垂直居中 */
.zr-nav .layui-nav .layui-nav-item {
    line-height: 64px; /* 行高=导航高度，实现文字垂直居中 */
}

/* 导航菜单链接 - 基础样式+过渡效果 */
.zr-nav .layui-nav .layui-nav-item a {
    padding: 0 10px; /* 左右内边距，控制链接间距 */
    color: #484b4f; /* 默认文字颜色（深灰） */
    transition: color 0.3s ease; /* 颜色变化过渡，提升交互流畅度 */
}

/* 当前激活的菜单项链接 - 高亮色 */
.zr-nav .layui-nav .layui-this a {
    color: var(--primary-color); /* 使用全局主色，突出当前页 */
}

/* 导航链接 hover 效果 - 主色高亮 */
.zr-nav .layui-nav .layui-nav-item a:hover {
    color: var(--primary-color); /* 鼠标悬浮时切换为主色 */
}

/* 用户操作区（登录/注册按钮等）- flex横向布局 */
.zr-user {
    display: flex; /* 弹性布局，使子元素横向排列 */
    align-items: center; /* 子元素垂直居中 */
    gap: 10px; /* 子元素间距10px */
    line-height: 64px; /* 行高适配导航高度 */
    position: absolute; /* 绝对定位 */
    z-index: 10; /* 层级高于普通内容，避免被遮挡 */
}

/* 用户区按钮样式 - 自定义尺寸和颜色 */
.zr-user .layui-btn {
    height: 30px; /* 按钮高度（小于导航高度，更精致） */
    line-height: 30px; /* 按钮文字垂直居中 */
    padding: 0 15px; /* 左右内边距，控制按钮宽度 */
    color: #fff; /* 按钮文字白色 */
    background: var(--primary-color); /* 按钮背景主色 */
    border-radius: 4px; /* 轻微圆角，提升质感 */
}

/* 移动端导航图标容器 - 默认隐藏，小屏下显示 */
.zr-navicon {
    display: none; /* 初始隐藏 */
}

/* 媒体查询：小屏设备（≤991px）适配 */
@media (max-width: 991px) {
    .zr-user {
        display: none !important; /* 小屏隐藏用户操作区 */
    }
    .zr-navicon {
        display: block; /* 小屏显示导航图标（如汉堡菜单、关闭按钮） */
    }
}

/* 图片LOGO样式 - 仅保留图片，无文字，完美居中 */
.zr-nav .zr-logo {
    position: absolute; /* 绝对定位，自由控制位置 */
    top: 50%; /* 顶部偏移50% */
    left: 50%; /* 左侧偏移50% */
    transform: translate(-50%, 25%); /* 水平+垂直精准居中 */
    width: 120px; /* LOGO宽度（可按需调整） */
    height: 40px; /* LOGO高度（匹配导航比例） */
    background: url("/uploads/app/logo.png") center/contain no-repeat; /* 仅图片LOGO，无文字 */
    overflow: hidden; /* 隐藏任何意外溢出的内容（如潜在文字） */
    text-indent: -9999px; /* 彻底隐藏可能存在的文字（防冗余） */
    z-index: 10; /* 层级保证LOGO不被遮挡 */
}

/* 移动端导航图标链接 - 基础内边距和间距 */
.zr-nav .zr-navicon a {
    padding: 10px 12px; /* 内边距，扩大点击区域 */
    margin-top: 13px; /* 顶部间距，垂直居中对齐导航 */
}

/* 移动端左侧导航图标（如汉堡菜单）- 居左 */
.zr-nav .zr-navicon a:first-child {
    position: absolute;
    left: 0; /* 靠左对齐 */
}

/* 移动端右侧导航图标（如搜索/个人中心）- 居右 */
.zr-nav .zr-navicon a:last-child {
    position: absolute;
    right: 0; /* 靠右对齐 */
}

/* 媒体查询：大屏设备（≥992px）适配 */
@media (min-width: 992px) {
    .zr-nav .layui-nav {
        display: block; /* 大屏显示导航菜单 */
    }
    
    .zr-user {
        right: 20px; /* 大屏下用户区靠右侧，留20px间距 */
    }

/* 大屏下LOGO调整 - 从居中改为居左 */
    .zr-nav .zr-logo {
        left: 20px; /* 靠左20px间距 */
        width: 150px; /* 大屏LOGO宽度稍大，提升辨识度 */
        height: 50px; /* 高度同步调整，保持比例 */
    }
}

/* 下拉菜单容器样式 - 隐藏+过渡动画 */
.layui-nav-item ul {
    position: absolute; /* 绝对定位，基于父菜单项 */
    top: 100%; /* 顶部对齐父菜单项底部 */
    left: 0; /* 左侧对齐父菜单项 */
    min-width: 120px; /* 下拉菜单最小宽度 */
    background: #fff; /* 白色背景，清晰区分 */
    box-shadow: 0 6px 12px rgba(0,0,0,0.1); /* 轻微阴影，增强层次感 */
    opacity: 0; /* 初始透明（隐藏） */
    visibility: hidden; /* 初始不可见（避免占位） */
    /* 过渡动画：透明度、可见性、位移同时变化，0.3s缓动 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(10px); /* 初始向下偏移10px，增强动画感 */
    z-index: 999; /* 层级低于导航容器，避免覆盖导航 */
}

/* 父菜单项hover时 - 显示下拉菜单 */
.layui-nav-item:hover > ul {
    opacity: 1; /* 完全不透明 */
    visibility: visible; /* 可见 */
    transform: translateY(0); /* 回归原位置 */
}

/* 下拉菜单项样式 - 基础排版+hover效果 */
.layui-nav-item ul li {
    padding: 0 15px; /* 左右内边距，控制文字间距 */
    line-height: 32px; /* 行高，垂直居中 */
    font-size: 13px; /* 字体稍小，不抢主菜单风头 */
    color: #646464; /* 文字颜色（中灰） */
    transition: background 0.2s; /* 背景色过渡，提升交互感 */
}

/* 下拉菜单项hover - 浅灰背景 */
.layui-nav-item ul li:hover {
    background: #f8f8f8; /* hover时背景浅灰，区分当前项 */
}

/* 带下拉菜单的导航项 - 箭头图标样式 */
.zr-nav-two > a:after {
    content: "\e61a"; /* layui图标库的向下箭头编码 */
    font-family: layui-icon; /* 指定图标字体 */
    margin-left: 6px; /* 与文字间距 */
    font-size: 14px; /* 图标大小 */
    transition: transform 0.3s; /* 旋转过渡动画 */
}

/* 带下拉菜单的导航项hover - 箭头旋转 */
.zr-nav-two:hover > a:after {
    transform: rotate(180deg); /* hover时箭头旋转180度，提示下拉展开 */
}
/* 顶部导航End */


/*侧边导航*/
/* 侧边导航 - 仅移动端显示（大屏隐藏），提供移动端核心导航功能 */
/* 1. 侧边导航主容器 - 全屏固定定位，覆盖移动端左侧区域 */
.zr-nav-left {
    z-index: 900; /* 层级低于顶部导航（1000），避免覆盖顶部导航 */
    width: 45%; /* 侧边栏宽度（占屏幕45%，留出右侧关闭区域） */
    background: #fff; /* 白色背景，清晰区分内容区 */
    position: fixed; /* 固定定位，全屏覆盖（上下左右贴边） */
    top: 0;
    bottom: 0;
    padding: 70px 10px; /* 顶部内边距=导航高度+预留间距，避免内容被顶部导航遮挡；左右内边距优化触摸体验 */
}

/* 2. 月亮图标（主题切换/夜间模式入口）- 右上角圆形按钮 */
.zr-nav-left-moon {
    color: #646464eb; /* 图标颜色（中灰） */
    float: right; /* 靠右对齐 */
    margin: 12px; /* 外边距，与边缘保持距离 */
    background: rgba(50, 50, 50, 0.06); /* 浅灰背景，提升点击辨识度 */
    width: 25px;
    height: 25px;
    line-height: 25px; /* 行高=宽高，实现图标垂直居中 */
    text-align: center; /* 图标水平居中 */
    border-radius: 100%; /* 圆形按钮 */
}

/* 3. 主题菜单容器 - 导航核心菜单包裹层 */
.zr-nav-left-theme {
    background: rgba(0, 0, 0, 0.03); /* 极浅灰背景，区分菜单区域 */
    border-radius: 10px; /* 圆角设计，提升质感 */
    padding: 8px; /* 内边距，让菜单项不贴边 */
}

/* 主题菜单项 - 基础排版与溢出处理 */
.zr-nav-left-theme li {
    display: block; /* 块级元素，独占一行 */
    padding: 8px 10px; /* 内边距，扩大点击区域 */
    overflow: hidden; /* 超出部分隐藏 */
    white-space: nowrap; /* 禁止文字换行 */
    text-overflow: ellipsis; /* 超出部分显示省略号，避免文字溢出 */
}

/* 非激活状态菜单项链接 - 默认颜色 */
.zr-nav-left-theme li:not(.zr-nav-left-this) a {
    color: #646464eb; /* 中灰颜色，不突出未激活项 */
}

/* 激活状态菜单项 - 主色高亮 */
.zr-nav-left-this {
    color: #2d8cf0 !important; /* 主色（蓝色），强制优先级，突出当前选中项 */
}

/* 菜单hover特殊逻辑 - 仅高亮当前hover项，其他激活项恢复默认色 */
.zr-nav-left-theme:hover .zr-nav-left-this:not(:hover) a {
    color: #646464eb !important; /*  hover菜单时，未hover的激活项恢复中灰，避免多重高亮 */
}

/* 菜单项链接 - 点击/聚焦状态高亮 */
.zr-nav-left-theme li a[href]:active,
.zr-nav-left-theme li a[href]:focus {
    color: #2d8cf0 !important; /* 点击或聚焦时强制主色，提升交互反馈 */
}

/* 4. 子菜单容器（二级导航）- 双列弹性布局 */
.zr-nav-left-zi {
    display: flex; /* 弹性布局，实现双列排列 */
    flex-wrap: wrap; /* 允许换行，适配内容数量 */
    gap: 4px; /* 子项间距，避免拥挤 */
    width: 100%; /* 占满父容器宽度 */
}

/* 子菜单项 - 每行两个，均匀分布 */
.zr-nav-left-zi li {
    flex: 0 0 calc(50% - 2px); /* 固定宽度：50%减间距（gap/2），确保每行恰好两个 */
    box-sizing: border-box; /* 盒模型：padding/border计入宽度，避免溢出 */
    padding: 8px 3px 0 0; /* 内边距，优化子项布局 */
}

/* 子菜单项链接 - 卡片式样式 */
.zr-nav-left-zi li > a {
    display: block; /* 块级元素，占满父项宽度 */
    background: rgba(50, 50, 50, 0.06); /* 浅灰背景，卡片化设计 */
    padding: 5px 5px; /* 内边距，填充卡片 */
    border-radius: 3px; /* 小圆角，柔和视觉 */
    font-size: 0.8em; /* 字体缩小，适配卡片尺寸 */
    text-align: center; /* 文字居中 */
}

/* 子菜单项链接hover - 主色高亮 */
.zr-nav-left-zi li > a:hover {
    color: #2d8cf0; /* hover时切换主色，提升交互反馈 */
}

/* 5. 用户操作区（底部功能入口）- 三列均匀分布 */
.zr-nav-left-user {
    display: flex;
    justify-content: space-around; /* 子元素均匀分布，两侧无多余间距 */
    gap: 10px; /* 子元素间距，避免拥挤 */
}

/* 用户操作项 - 垂直排列（图标+文字） */
.zr-nav-left-user a {
    display: flex;
    flex-direction: column; /* 子元素垂直排列（图标在上，文字在下） */
    align-items: center; /* 子元素水平居中 */
    padding: 10px; /* 内边距，扩大点击区域 */
    text-decoration: none; /* 移除链接下划线 */
    transition: all 0.3s; /* 所有属性过渡，提升交互流畅度 */
}

/* 用户操作项图标 - 圆形背景样式 */
.zr-nav-left-user a i {
    width: 36px;
    height: 36px;
    font-size: 18px; /* 图标放大，提升辨识度 */
    display: flex;
    align-items: center;
    justify-content: center; /* 图标在圆形内居中 */
    margin-bottom: 8px; /* 图标与文字间距 */
    border-radius: 17px; /* 圆形背景（半径≈宽高的一半） */
    background: rgba(50, 50, 50, 0.06); /* 浅灰背景，突出图标 */
}

/* 用户操作项文字样式 */
.zr-nav-left-user a cite {
    font-size: 12px; /* 小字体，不抢图标风头 */
    color: #666; /* 中灰颜色，保证可读性 */
    font-style: normal; /* 取消cite默认斜体 */
}

/* 用户操作项hover效果 - 上移+主色高亮 */
.zr-nav-left-user a:hover {
    transform: translateY(-3px); /* 上移3px，模拟悬浮效果 */
    color: #2d8cf0; /* 文字主色高亮，强化交互反馈 */
}

/* 6. 侧边栏动画 - 入场/出场过渡 */
/* 入场动画（从左滑入） */
.leftIn {
    -moz-animation: leftIn 0.3s; /* 火狐浏览器兼容 */
    -o-animation: leftIn 0.3s; /* 欧朋浏览器兼容 */
    -webkit-animation: leftIn 0.3s; /* 谷歌/ safari浏览器兼容 */
    animation: leftIn 0.3s; /* 标准动画，0.3s完成 */
}

/* 出场动画（从左滑出） */
.leftOut {
    -moz-animation: leftOut 0.3s;
    -o-animation: leftOut 0.3s;
    -webkit-animation: leftOut 0.3s;
    animation: leftOut 0.3s;
}

/* 响应式适配：大屏设备（≥992px）- 隐藏侧边导航 */
@media (min-width: 992px) {
    .zr-nav-left {
        display: none !important; /* 大屏下用顶部导航菜单，强制隐藏侧边栏 */
    }
}

/* 侧边导航END */


/* 侧边导航遮罩 - 配合移动端侧边栏使用，点击遮罩可关闭侧边栏，增强视觉层级 */
/* 遮罩主容器 - 全屏覆盖，半透明模糊效果 */
.zr-mask {
    position: fixed; /* 固定定位，全屏覆盖整个视口 */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; /* 上下左右均贴边，实现全屏遮罩 */
    background: rgba(24, 25, 27, .8); /* 深灰半透明背景（透明度80%），遮挡底层内容 */
    z-index: 800; /* 层级低于侧边导航（900）、高于页面内容，确保遮罩在中间层 */
    -webkit-backdrop-filter: saturate(180%) blur(6px); /* webkit内核浏览器兼容：背景饱和+模糊，提升质感 */
    backdrop-filter: saturate(180%) blur(6px); /* 标准属性：模糊遮罩背景，让底层内容不刺眼 */
}

/* 遮罩淡入动画 - 侧边栏弹出时，遮罩逐渐显示 */
.maskIn {
    -moz-animation: maskFadeIn 0.5s; /* 火狐浏览器兼容 */
    -o-animation: maskFadeIn 0.5s; /* 欧朋浏览器兼容 */
    -webkit-animation: maskFadeIn 0.5s; /* 谷歌/ Safari浏览器兼容 */
    animation: maskFadeIn 0.5s; /* 标准淡入动画，0.5s完成，过渡自然 */
}

/* 遮罩淡出动画 - 侧边栏关闭时，遮罩逐渐隐藏 */
.maskOut {
    -moz-animation: maskFadeOut 0.5s; /* 多浏览器兼容前缀 */
    -o-animation: maskFadeOut 0.5s;
    -webkit-animation: maskFadeOut 0.5s;
    animation: maskFadeOut 0.5s; /* 标准淡出动画，与侧边栏出场动画同步 */
}

/* 响应式适配：大屏设备（≥992px）- 隐藏遮罩 */
@media (min-width: 992px) {
    .zr-mask {
        display: none; /* 大屏下侧边导航已隐藏，遮罩无需显示 */
    }
}
/* 侧边导航遮罩END */

/* 搜索/背景开始 */
/* 动态背景容器样式 */
/* 一、搜索区+动态背景模块 - 页面顶部核心交互区域，含渐变背景、搜索功能、历史记录 */
/* 1. 动态渐变背景容器 - 全屏宽，带循环渐变动画，衔接页面主体 */
.bg-container {
    background-image: linear-gradient(45deg, #8618db 0%, #d711ff 50%, #460fdd 100%); /* 紫-粉-蓝渐变背景 */
    background-size: 400%; /* 背景尺寸放大，为渐变动画提供移动空间 */
    background-position: 0% 100%; /* 初始背景位置 */
    animation: gradient 10s ease-in-out infinite; /* 绑定渐变动画，10秒循环，缓动自然 */
    width: 100%;
    height: 280px; /* 固定背景高度，保证视觉完整性 */
    margin-top: -30px; /* 负边距向上偏移，与顶部导航衔接更自然 */
    position: relative; /* 作为子元素（遮罩、搜索框）定位参考 */
    display: flex;
    align-items: center;
    justify-content: center; /* 搜索容器垂直+水平居中 */
    overflow: hidden; /* 隐藏溢出内容，避免渐变动画错乱 */
}

/* 背景底部淡出遮罩 - 平滑衔接页面主体背景（#f2f4f7） */
.bg-container::after {
    content: '';
    position: absolute;
    bottom: -1px; /* 贴底且微偏移，避免缝隙 */
    left: 0;
    right: 0;
    height: 220px; /* 遮罩高度，控制淡出过渡范围 */
    background: linear-gradient(to top, #f2f4f7 0%, transparent 80%); /* 从主体色到透明的渐变 */
    z-index: 1; /* 层级低于搜索容器，不遮挡交互元素 */
}

/* 渐变背景动画关键帧 - 背景位置循环移动，实现流动效果 */
@keyframes gradient {
    0% {
        background-position: 0% 50%; /* 动画起点：背景左中位置 */
        opacity: 0.95; /* 初始透明度 */
    }
    50% {
        background-position: 100% 50%; /* 动画中点：背景右中位置 */
        opacity: 1; /* 中间状态完全不透明 */
    }
    100% {
        background-position: 0% 50%; /* 动画终点：回归起点，形成循环 */
        opacity: 0.95;
    }
}

/* 2. 搜索容器 - 包裹所有搜索相关元素，居中显示 */
.search-container {
    margin: 0 auto;
    width: 90%; /* 小屏占比90%，适配移动端 */
    max-width: 800px; /* 大屏最大宽度800px，避免过宽 */
    position: relative;
    z-index: 10; /* 层级高于背景遮罩，确保交互优先级 */
    transition: all 0.4s ease; /* 整体过渡，提升交互流畅度 */
}

/* 搜索主标签栏（如“网页/视频/图片”）- 水平居中布局 */
.search-tabs {
    display: flex;
    justify-content: center; /* 标签水平居中 */
    margin-bottom: 10px; /* 与输入框间距 */
    white-space: nowrap; /* 标签不换行 */
    padding: 0 15px; /* 左右内边距，避免贴边 */
    position: relative; /* 作为滑块指示器定位参考 */
}

/* 单个主标签样式 - 基础状态+交互反馈 */
.search-tab {
    padding: 7px 18px; /* 内边距，扩大点击区域 */
    cursor: pointer; /* 鼠标悬浮变指针，提示可点击 */
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7); /* 未激活状态：浅白色（70%透明度） */
    transition: all 0.3s ease; /* 颜色过渡 */
    position: relative;
    font-weight: 500; /* 字体稍粗，提升辨识度 */
    z-index: 1; /* 层级低于滑块指示器 */
}

/* 主标签悬停效果 - 加深白色，增强反馈 */
.search-tab:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* 主标签激活状态 - 纯白色，突出当前选中项 */
.search-tab.active {
    color: #fff;
}

/* 主标签滑块指示器 - 白色小条，跟随激活标签移动 */
.tab-indicator {
    position: absolute;
    bottom: -5px; /* 位于标签栏底部下方5px */
    height: 5px;
    width: 30px; /* 固定宽度，小巧圆润 */
    background: white;
    border-radius: 5px; /* 圆角设计，柔和视觉 */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 缓动函数，移动更顺滑 */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5); /* 白色阴影，增强立体感 */
    z-index: 2; /* 层级高于标签，确保显示在上方 */
}

/* 搜索表单容器 - 包裹输入框和按钮 */
.search-form {
    padding: 0 15px;
    transition: all 0.3s ease;
    position: relative;
}

/* 搜索输入组 - flex布局，输入框+按钮横向排列 */
.search-input-group {
    display: flex;
    margin-bottom: 15px; /* 与子标签间距 */
    border-radius: 10px; /* 整体圆角，统一风格 */
    overflow: hidden; /* 裁剪溢出内容，确保圆角生效 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 轻微阴影，提升层次感 */
    transition: all 0.3s ease;
}

/* 搜索输入框 - 自适应宽度，通透样式 */
.search-input {
    flex: 1; /* 占满剩余宽度 */
    padding: 14px 20px; /* 内边距，优化输入体验 */
    border: none; /* 取消默认边框 */
    background: rgba(255, 255, 255, 0.95); /* 近乎纯白的半透明背景，通透不刺眼 */
    outline: none; /* 取消聚焦默认轮廓 */
    font-size: 16px;
    color: #333; /* 输入文字深灰，保证可读性 */
    transition: all 0.3s ease;
}

/* 搜索按钮 - 渐变背景，带hover动画 */
.search-btn {
    padding: 0 25px; /* 左右内边距，控制按钮宽度 */
    background: linear-gradient(45deg, #8618db, #d711ff); /* 与背景呼应的紫-粉渐变 */
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold; /* 字体加粗，突出按钮 */
    display: flex;
    align-items: center;
    justify-content: center; /* 图标/文字居中 */
    position: relative;
    overflow: hidden; /* 隐藏动画溢出内容 */
}

/* 按钮hover效果 - 渐变加深，增强反馈 */
.search-btn:hover {
    background: linear-gradient(45deg, #700fc4, #b90bd9); /* 更深的紫-粉渐变 */
}

/* 按钮高亮动画（hover时的流光效果） */
.search-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* 初始位置在按钮左侧外部 */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); /* 透明-白-透明渐变 */
    transition: 0.5s; /* 动画时长 */
}

/* hover时触发流光动画 - 从左到右滑动 */
.search-btn:hover::before {
    left: 100%; /* 动画终点在按钮右侧外部 */
}

/* 按钮图标样式 - hover放大 */
.search-btn i {
    font-size: 18px;
    transition: transform 0.3s ease; /* 缩放过渡 */
}

.search-btn:hover i {
    transform: scale(1.1); /* 放大1.1倍，增强交互反馈 */
}

/* 3. 子搜索标签栏（如具体搜索渠道）- 居中换行布局 */
.search-engines {
    display: flex;
    justify-content: center; /* 水平居中 */
    flex-wrap: wrap; /* 超出换行，适配小屏 */
    gap: 8px; /* 标签间距 */
    padding: 0 15px 15px; /* 下内边距，避免贴底 */
    transition: all 0.3s ease;
    opacity: 1; /* 默认显示 */
    max-height: 100px; /* 最大高度，限制换行数量 */
    overflow: hidden;
    position: relative;
}

/* 单个子搜索标签样式 - 与主标签风格一致 */
.engine-item {
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    color: rgba(255, 255, 255, 0.7); /* 未激活：浅白 */
    font-weight: 500;
}

/* 子标签hover效果 - 加深白色 */
.engine-item:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* 子标签激活状态 - 纯白色 */
.engine-item.active {
    color: #fff;
}

/* 子标签滑块指示器 - 位于标签顶部的白色小条 */
.engine-indicator {
    position: absolute;
    top: 0; /* 贴标签顶部 */
    height: 5px;
    width: 30px;
    background: white;
    border-radius: 5px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 顺滑移动 */
    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5);
    z-index: 11; /* 层级确保显示在上方 */
}

/* 搜索内容区 - 包含历史记录，设置最小高度避免布局抖动 */
.search-content {
    min-height: 100px;
    position: relative; /* 作为历史记录绝对定位参考 */
}

/* 搜索历史记录容器 - 绝对定位，位于搜索框下方 */
.search-history {
    position: absolute;
    bottom: 30px; /* 距离底部30px */
    left: 0;
    right: 0;
    z-index: 5; /* 层级低于搜索框，不遮挡输入 */
    padding: 10px 20px;
    min-height: 50px;
    transition: all 0.3s ease;
    opacity: 1; /* 默认显示 */
    max-height: 200px; /* 限制最大高度，避免过多记录占空间 */
}

/* 条件隐藏：未输入关键词时，隐藏历史记录 */
.search-container:not(.onsite-tab) .search-history {
    opacity: 0; /* 透明 */
    max-height: 0; /* 高度归零 */
    padding: 0; /* 取消内边距 */
    border: none;
    visibility: hidden; /* 隐藏（不占布局空间） */
}

/* 搜索标签内容区 - 最小高度，避免布局抖动 */
.search-content > .search-tab-content {
    min-height: 100px;
}

/* 历史记录头部 - 标题+清空按钮，左右分布 */
.history-header {
    display: flex;
    justify-content: space-between; /* 左右两端对齐 */
    margin-bottom: 10px; /* 与历史项间距 */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8); /* 浅白标题色 */
}

/* 清空历史链接样式 - hover高亮 */
.history-header a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none; /* 取消下划线 */
    transition: all 0.3s ease;
}

.history-header a:hover {
    color: white; /* hover时纯白 */
}

/* 历史记录项容器 - 水平滚动布局（不换行） */
.history-items {
    display: flex;
    flex-wrap: nowrap; /* 禁止换行 */
    gap: 5px; /* 记录项间距 */
    overflow-x: auto; /* 超出水平滚动 */
    padding-bottom: 5px; /* 预留滚动条空间，避免遮挡 */
    max-width: 100%; /* 不超过父容器宽度 */
}

/* 隐藏滚动条（兼容多浏览器）- 提升视觉整洁度 */
.history-items::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.history-items {
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 单个历史记录项样式 - 圆角卡片，通透设计 */
.history-item {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15); /* 半透明白色背景，通透感 */
    border-radius: 20px; /* 圆形卡片 */
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease; /* 颜色过渡 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 浅白边框，增强轮廓 */
    color: rgba(255, 255, 255, 0.9); /* 浅白文字 */
    backdrop-filter: blur(5px); /* 背景模糊，提升质感 */
    white-space: nowrap; /* 文字不换行 */
    flex-shrink: 0; /* 禁止缩小，保证卡片完整性 */
}

/* 历史记录项hover效果 - 加深背景，纯白文字 */
.history-item:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* 响应式适配：小屏设备（≤768px）- 调整尺寸，适配触摸操作 */
@media (max-width: 768px) {
    .search-tab {
        padding: 4px 14px; /* 减小标签内边距 */
        font-size: 14px; /* 缩小字体 */
    }
    .search-input {
        padding: 12px 15px; /* 减小输入框内边距 */
        font-size: 15px; /* 缩小字体 */
    }
    .search-btn {
        padding: 0 20px; /* 减小按钮宽度 */
    }
    .engine-item {
        padding: 6px 12px; /* 减小子标签内边距 */
        font-size: 13px; /* 缩小字体 */
    }
}
/* 搜索/背景模块 END */

/* 二、Layui组件重写 - 覆盖Layui默认样式，统一页面视觉风格 */
/* 简洁标签页背景 - 白色背景，与页面风格统一 */
.layui-tab-brief {
    background: #fff;
}

/* 快捷悬浮按钮（如回到顶部/客服）- 固定在右下角 */
.layui-fixbar {
    position: fixed;
    right: 20px; /* 靠右20px */
    bottom: 80px; /* 靠底80px，避免遮挡底部内容 */
    z-index: 700; /* 层级低于导航和遮罩，不影响核心交互 */
}

/* 快捷按钮样式 - 圆形、半透明模糊背景 */
.layui-fixbar li {
    width: 40px;
    height: 40px;
    line-height: 40px; /* 文字/图标垂直居中 */
    margin-top: 10px; /* 按钮间距 */
    text-align: center; /* 水平居中 */
    cursor: pointer;
    font-size: 30px; /* 图标大小 */
    color: #ffffff; /* 白色图标 */
    border-radius: 10px; /* 圆角设计 */
    opacity: .95; /* 高透明度，不突兀 */
    -webkit-backdrop-filter: saturate(180%) blur(6px); /* 兼容webkit：背景模糊 */
    backdrop-filter: saturate(180%) blur(6px); /* 背景模糊，提升质感 */
    background: rgb(140 140 140 / 55%); /* 灰色半透明背景 */
}

/* 卡片组件 - 圆角优化，统一间距 */
.layui-card {
    border-radius: 10px; /* 圆角10px，柔和视觉 */
    margin-bottom: 10px; /* 卡片间距，避免拥挤 */
}

/* 导航栏激活态指示器 - 主色高亮，调整高度 */
.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
    height: 3px; /* 指示器高度，更精致 */
    background-color: var(--primary-color); /* 使用全局主色，保持风格统一 */
}

/* 手机端侧边栏选中态 - 深灰半透明背景，白色文字 */
.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover {
    background-color: #929292a3; /* 深灰半透明背景 */
    color: #fff; /* 白色文字，突出选中 */
}

/* 按钮间距重写 - 取消默认左侧间距，适配自定义布局 */
.layui-btn+.layui-btn {
    margin-left: 0;
}

/* 首页标签栏激活态 - 主色文字 */
.layui-tab-brief > .layui-tab-title .layui-this {
    color: var(--primary-color); /* 主色高亮，统一风格 */
}

/* 标签栏激活指示器 - 主色边框，调整高度 */
.layui-tab-brief > .layui-tab-more li.layui-this:after,
.layui-tab-brief > .layui-tab-title .layui-this:after {
    border-bottom: 3px solid var(--primary-color); /* 主色下边框，突出激活项 */
}

/* 垂直标签栏激活态 - 主色边框+文字 */
.layui-tab.layui-tab-vertical > .layui-tab-title > li.layui-this {
    border-color: var(--primary-color); /* 主色边框 */
    color: var(--primary-color); /* 主色文字 */
}

/* 卡片头部标题 - 字体放大，提升辨识度 */
.layui-card-header {
    font-size: 18px; /* 标题字体18px，比默认更大 */
}

/* 输入框占位符 - 深灰色，提升可读性 */
.layui-input::placeholder {
    color: rgba(124, 124, 124, 0.92) !important; /* 深灰占位符，避免过浅看不清 */
}
/* Layui重写 END */

/* 三、动画定义模块 - 页面交互动画，含侧边导航、遮罩的显示/隐藏动画 */
/* 1. 侧边导航入场动画（从左滑入）- 兼容多浏览器 */
@keyframes leftIn {
    from {
        left: -200px; /* 动画起点：左侧外部（-200px） */
    }
    to {
        left: 0; /* 动画终点：贴左显示 */
    }
}
/* 火狐浏览器兼容 */
@-moz-keyframes leftIn {
    from { left: -200px; }
    to { left: 0; }
}
/* Chrome/Safari浏览器兼容 */
@-webkit-keyframes leftIn {
    from { left: -200px; }
    to { left: 0; }
}

/* 2. 侧边导航出场动画（从左滑出）- 兼容多浏览器 */
@keyframes leftOut {
    from {
        left: 0; /* 动画起点：贴左显示 */
    }
    to {
        left: -200px; /* 动画终点：左侧外部（-200px） */
    }
}
/* 火狐浏览器兼容 */
@-moz-keyframes leftOut {
    from { left: 0; }
    to { left: -200px; }
}
/* Chrome/Safari浏览器兼容 */
@-webkit-keyframes leftOut {
    from { left: 0; }
    to { left: -200px; }
}

/* 3. 遮罩淡入动画（逐渐显示）- 兼容多浏览器 */
@keyframes maskFadeIn {
    from {
        opacity: 0; /* 动画起点：完全透明（隐藏） */
    }
    to {
        opacity: 1; /* 动画终点：完全不透明（显示） */
    }
}
/* 火狐浏览器兼容 */
@-moz-keyframes maskFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Chrome/Safari浏览器兼容 */
@-webkit-keyframes maskFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 4. 遮罩淡出动画（逐渐隐藏）- 兼容多浏览器 */
@keyframes maskFadeOut {
    from {
        opacity: 1; /* 动画起点：完全不透明（显示） */
    }
    to {
        opacity: 0; /* 动画终点：完全透明（隐藏） */
    }
}
/* 火狐浏览器兼容 */
@-moz-keyframes maskFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
/* Chrome/Safari浏览器兼容 */
@-webkit-keyframes maskFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}