* {
    margin: 0; /* 清除所有元素默认外边距 */
    padding: 0; /* 清除所有元素默认内边距 */
    box-sizing: border-box; /* 盒模型：width/height 包含 padding 和 border，避免布局错乱 */
    font-family: "Microsoft Yahei", "Helvetica Neue", Arial, sans-serif; /* 字体栈：优先微软雅黑，兼容不同系统 */
    transition: all 0.2s ease; /* 所有属性变化时，0.2秒平滑过渡（如hover效果） */
}

body {
    background: #f8f9fa; /* 页面背景色：淡灰色，柔和不刺眼 */
    padding: 30px 20px; /* 页面内边距：上下30px，左右20px，避免内容贴边 */
    color: #333; /* 全局文字颜色：深灰色，提升可读性 */
    line-height: 1.6; /* 行高：1.6倍字体大小，文字排版更舒展 */
}

/* 表单容器样式（添加/编辑词条页面的外层容器） */
.form-container {
    max-width: 1200px; /* 最大宽度1200px，与词条列表宽度一致，视觉统一 */
    margin: 0 auto 30px; /* 外边距：上下0，左右自动居中；底部30px，与下方内容隔开 */
    background: #fff; /* 容器背景色：白色，突出表单内容 */
    padding: 35px; /* 容器内边距：上下左右35px，内部内容不贴边 */
    border-radius: 12px; /* 圆角：12px，现代感设计 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 阴影：垂直偏移4px，模糊15px，透明度5%，增强层次感 */
    border: 1px solid #f0f0f0; /* 边框：浅灰色细边框，提升精致感 */
    position: relative; /* 相对定位，为右侧悬浮工具栏提供定位参考 */
}

.form-container h2 {
    margin-bottom: 30px; /* 标题下方外边距30px，与表单元素隔开 */
    color: #2d3748; /* 标题颜色：深灰蓝色，比普通文字深，突出层级 */
    text-align: center; /* 标题居中对齐 */
    font-size: 24px; /* 标题字号24px，醒目但不夸张 */
    font-weight: 600; /* 字体粗细：半粗体，比普通文字重，突出标题 */
    position: relative; /* 相对定位，为下方装饰线做准备 */
}

.form-container h2::after {
    content: ""; /* 伪元素：必须有content属性才会显示，空值表示纯样式元素 */
    display: block; /* 显示方式：块级元素，独占一行 */
    width: 60px; /* 装饰线宽度60px */
    height: 3px; /* 装饰线高度3px */
    background: #3498db; /* 装饰线颜色：蓝色，与主题色呼应 */
    margin: 10px auto 0; /* 外边距：上下10px，左右自动居中，位于标题下方 */
    border-radius: 3px; /* 装饰线圆角3px，与高度一致，呈半圆形 */
}

/* 表单组样式（每个输入框/下拉框的外层容器） */
.form-group {
    margin-bottom: 25px; /* 表单组之间的间距25px，避免拥挤 */
}

.form-group label {
    display: block; /* 标签显示方式：块级元素，独占一行，与输入框上下排列 */
    margin-bottom: 10px; /* 标签下方外边距10px，与输入框隔开 */
    color: #4a5568; /* 标签颜色：中灰色，比普通文字浅，不抢焦点 */
    font-weight: 500; /* 字体粗细：半粗体，让标签更清晰 */
    font-size: 15px; /* 标签字号15px，适中易读 */
}

.form-group input,
.form-group select {
    width: 100%; /* 输入框/下拉框宽度：占满父容器，统一布局 */
    padding: 12px 15px; /* 内边距：上下12px，左右15px，输入区域舒适 */
    border: 1px solid #dee2e6; /* 边框：浅灰色，不突兀 */
    border-radius: 8px; /* 圆角8px，与容器风格统一 */
    font-size: 15px; /* 输入文字字号15px，易读 */
    color: #2d3748; /* 输入文字颜色：深灰蓝色，清晰 */
}

/* 输入框/下拉框焦点状态（点击后激活） */
.form-group input:focus,
.form-group select:focus {
    outline: none; /* 清除默认焦点轮廓（浏览器自带的蓝色粗边框） */
    border-color: #3498db; /* 焦点时边框颜色：蓝色，突出激活状态 */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); /* 焦点阴影：蓝色半透明，柔和不刺眼 */
}

/* 提交按钮样式 */
.submit-btn {
    width: 100%; /* 按钮宽度：占满父容器，醒目 */
    padding: 14px; /* 内边距14px，按钮大小适中，点击区域充足 */
    background: #3498db; /* 按钮背景色：蓝色，主题色 */
    color: #fff; /* 按钮文字颜色：白色，对比强烈，易读 */
    border: none; /* 清除默认边框 */
    border-radius: 8px; /* 圆角8px，与整体风格统一 */
    font-size: 16px; /* 按钮文字字号16px，醒目 */
    font-weight: 500; /* 字体粗细：半粗体，突出按钮文字 */
    cursor: pointer; /* 鼠标指针：手型，提示可点击 */
    letter-spacing: 0.5px; /* 字间距0.5px，文字更舒展 */
}

/* 提交按钮hover状态（鼠标悬浮时） */
.submit-btn:hover {
    background: #2980b9; /* 背景色：深蓝色，比默认深，反馈hover状态 */
    transform: translateY(-1px); /* 向上偏移1px，轻微上浮效果，增强交互感 */
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.2); /* 阴影加深：透明度20%，更明显的层次感 */
}

/* 提交按钮active状态（鼠标点击时） */
.submit-btn:active {
    transform: translateY(0); /* 取消上浮，回到原位置，反馈点击动作 */
}

/* 右侧悬浮工具栏样式 - 核心修改 */
.float-toolbar {
    position: fixed; /* 固定定位：不随页面滚动，始终在右侧 */
    top: 50%; /* 垂直居中：距离顶部50% */
    right: 130px; /* 距离右侧30px，不贴边 */
    transform: translateY(-50%); /* 垂直居中修正：向上偏移自身50% */
    /*  background: #fff;工具栏背景色：白色，突出按钮 */
    border-radius: 10px; /* 圆角10px，现代感 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.0); /* 阴影：增强层次感 */
    padding: 15px 0; /* 上下内边距15px，左右0 */
    z-index: 999; /* 层级999：高于编辑器，不被遮挡 */
     /* border: 1px solid #f0f0f0; 浅灰色边框，提升精致感 */
}

/* 悬浮工具栏按钮样式 */
.float-toolbar button {
    display: block; /* 块级元素：按钮独占一行，垂直排列 */
    width: 50px; /* 按钮宽度50px，统一大小 */
    height: 50px; /* 按钮高度50px，正方形更美观 */
    margin: 8px auto; /* 上下外边距8px，左右自动居中 */
    border: none; /* 清除默认边框 */
    border-radius: 8px; /* 圆角8px，精致 */
    color: #fff; /* 按钮文字颜色：白色 */
    cursor: pointer; /* 鼠标指针：手型 */
    font-size: 14px; /* 按钮文字字号14px */
    font-weight: 500; /* 字体粗细：半粗体 */
    display: flex; /* 弹性布局：文字垂直水平居中 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    text-align: center; /* 文字居中（适配换行） */
    padding: 0 5px; /* 左右内边距5px，避免文字溢出 */
}

/* 按钮颜色区分 */
.float-toolbar button.btn-index { background: #d785e1; } /* 标红按钮：红色 */
.float-toolbar button.btn-red { background: #e74c3c; } /* 标红按钮：红色 */
.float-toolbar button.btn-yellow { background: #f1c40f; } /* 黄底按钮：黄色 */
.float-toolbar button.btn-green { background: #2e7d32; } /* 标绿按钮：深绿色 */
.float-toolbar button.btn-blue { background: #1565c0; } /* 标蓝按钮：深蓝色 */
.float-toolbar button.btn-img { background: #9b59b6; } /* 上传图片：紫色 */
.float-toolbar button.btn-word { background: #1abc9c; } /* 上传Word：青色 */
.float-toolbar button.btn-excel { background: #f39c12; } /* 上传Excel：橙色 */

/* 按钮hover状态 */
.float-toolbar button:hover {
    transform: translateY(-2px); /* 向上偏移2px，增强交互感 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 阴影加深，突出按钮 */
}

/* 富文本编辑器样式 - 适配右侧工具栏，增加右侧内边距 */
.content-editor {
    width: 100%; /* 编辑器宽度：占满父容器 */
    min-height: 500px; /* 最小高度500px，适配长内容 */
    padding: 20px 30px; /* 内边距：上下20px，左右30px（右侧预留工具栏空间） */
    border: 1px solid #dee2e6; /* 边框：浅灰色，不突兀 */
    border-radius: 8px; /* 圆角8px，与整体风格统一 */
    background: #fff; /* 背景色：白色，突出输入内容 */
    line-height: 1.8; /* 行高1.8倍，文字排版更舒适 */
    resize: vertical; /* resize：仅允许垂直拉伸，保持宽度一致 */
    outline: none; /* 清除默认焦点轮廓 */
    font-size: 15px; /* 编辑区文字字号15px，易读 */
}

/* 编辑器焦点状态 */
.content-editor:focus {
    border-color: #3498db; /* 焦点边框颜色：蓝色，突出激活状态 */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); /* 焦点阴影：蓝色半透明，柔和 */
}

/* 编辑器内图片样式 */
.content-editor img {
    max-width: 100%; /* 图片最大宽度：占满编辑器，避免溢出 */
    margin: 15px 0; /* 图片上下外边距15px，与文字隔开 */
    border-radius: 6px; /* 图片圆角6px，更精致 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* 图片阴影：轻微阴影，增强立体感 */
}

/* 编辑器内表格样式 */
.content-editor table {
    border-collapse: collapse; /* 表格边框合并：相邻单元格共用边框 */
    width: 100%; /* 表格宽度：占满编辑器 */
    margin: 15px 0; /* 表格上下外边距15px，与文字隔开 */
    font-size: 14px; /* 表格文字字号14px，比正文小，不拥挤 */
}

/* 表格单元格样式 */
.content-editor td,
.content-editor th {
    border: 1px solid #dee2e6; /* 单元格边框：浅灰色 */
    padding: 10px 12px; /* 单元格内边距：上下10px，左右12px，内容不贴边 */
}

/* 表格表头样式 */
.content-editor th {
    background: #f8f9fa; /* 表头背景色：淡灰色，与表体区分 */
    font-weight: 500; /* 表头文字粗细：半粗体，突出表头 */
    color: #2d3748; /* 表头文字颜色：深灰蓝色，清晰 */
}

/* 文字颜色样式 - 标红 */
.text-red {
    color: #e74c3c; /* 文字颜色：红色 */
}

/* 文字颜色样式 - 标绿 */
.text-green {
    color: #2e7d32; /* 文字颜色：深绿色 */
}

/* 文字颜色样式 - 标蓝 */
.text-blue {
    color: #1565c0; /* 文字颜色：深蓝色 */
}

/* 文字背景样式 - 黄底 */
.text-yellow-bg {
    background-color: #f1ab0c; /* 背景色：淡黄色，不刺眼 */
}

/* 搜索框外层容器样式 */
.search-box {
    max-width: 1200px; /* 最大宽度1200px，与词条列表宽度一致 */
    margin: 0 auto 30px; /* 外边距：上下0，左右居中；底部30px，与词条列表隔开 */
    display: flex; /* 弹性布局：输入框和按钮横向排列 */
    height: 52px; /* 固定高度52px，保持搜索框挺拔 */
}

/* 搜索输入框样式 */
.search-input {
    flex: 1; /* 弹性占比1：占据剩余所有宽度，让按钮紧贴右侧 */
    padding: 12px 120px; /* 内边距：上下12px，左右120px，输入区域舒适 */
    border: 1px solid #dee2e6; /* 边框：浅灰色 */
    border-right: none; /* 取消右侧边框，与按钮无缝衔接 */
    border-radius: 8px 0 0 8px; /* 圆角：仅左上、左下8px，与按钮圆角呼应 */
    font-size: 16px; /* 输入文字字号16px，易读 */
    color: #2d3748; /* 输入文字颜色：深灰蓝色 */
}

/* 搜索输入框焦点状态 */
.search-input:focus {
    outline: none; /* 清除默认焦点轮廓 */
    border-color: #3498db; /* 焦点边框颜色：蓝色 */
}

/* 搜索按钮样式 */
.search-btn {
    padding: 0 25px; /* 内边距：上下0，左右25px，按钮宽度适中 */
    background: #3498db; /* 背景色：蓝色，主题色 */
    color: #fff; /* 文字颜色：白色 */
    border: none; /* 清除默认边框 */
    border-radius: 0 8px 8px 0; /* 圆角：仅右上、右下8px，与输入框呼应 */
    cursor: pointer; /* 鼠标指针：手型 */
    font-size: 25px; /* 按钮文字字号18px，醒目 */
    font-weight: 500; /* 字体粗细：半粗体 */
}

/* 第3个按钮（清空按钮）样式 */
.search-btn:nth-child(3) {
    border-radius: 0; /* 取消圆角：中间按钮无圆角，与左右按钮无缝衔接 */
    background: #95a5a6; /* 背景色：中灰色，与搜索按钮区分 */
}

/* 第3个按钮hover状态 */
.search-btn:nth-child(3):hover {
    background: #7f8c8d; /* 背景色：深灰色，反馈hover */
}

/* 最后一个按钮样式（确保右侧圆角） */
.search-btn:last-child {
    border-radius: 0 8px 8px 0; /* 强制右侧圆角，避免被中间按钮覆盖 */
}

/* 搜索按钮hover状态 */
.search-btn:hover {
    background: #2980b9; /* 背景色：深蓝色，反馈hover */
    transform: translateY(-1px); /* 向上偏移1px，增强交互感 */
}

/* 词条列表外层容器样式 */
.entry-list {
    max-width: 1200px; /* 最大宽度1200px，与搜索框一致 */
    margin: 0 auto 30px; /* 外边距：上下0，左右居中；底部30px，与下方内容隔开 */
}

/* 单个词条样式 */
.entry-item {

    background: #fffdf6; /* 背景色：白色，突出词条 */
    border-radius: 10px; /* 圆角10px，现代感 */
    padding: 5px; /* 内边距5px，内容不贴边 */
    margin-bottom: 12px; /* 词条之间间距12px，不拥挤 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 轻微阴影，增强层次感 */
    border: 1px solid #4ae5b3; /* 浅灰色边框，提升精致感 */
}

/* 置顶词条样式（突出标识） */
.entry-item.is-top {
    border: 2px solid #e74c3c; /* 边框：2px红色，比普通词条粗，醒目 */
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.08); /* 红色阴影，强化置顶标识 */
}

/* 词条标题栏样式（可点击区域） */
.entry-header {
    display: flex; /* 弹性布局：标题、分类、操作按钮横向排列 */
    align-items: center; /* 垂直居中对齐 */
    padding: 8px 0; /* 上下内边距8px，增加点击区域 */
    gap: 12px; /* 内部元素间距12px，不拥挤 */
    cursor: pointer; /* 鼠标指针：手型，提示可点击展开/收起 */
}

/* 词条标题样式 */
.entry-title {
    font-size: 19px; /* 标题字号19px，醒目 */
    color: #2d3748; /* 标题颜色：深灰蓝色，突出 */
    flex: 1; /* 弹性占比1：占据剩余宽度，让分类和按钮靠右侧 */
    font-weight: 500; /* 字体粗细：半粗体，突出标题 */
}

/* 词条标题hover状态 */
.entry-title:hover {
    color: #3498db; /* 颜色：蓝色，反馈hover，提示可点击 */
}

/* 词条分类标签样式 */
.entry-cate {
    margin: 0 8px; /* 左右外边距8px，与标题、按钮隔开 */
    padding: 5px 12px; /* 内边距：上下5px，左右12px，标签大小适中 */
    background: #e8f4f8; /* 背景色：淡蓝色，与分类文字呼应 */
    border-radius: 20px; /* 圆角20px，圆形标签，现代感 */
    font-size: 13px; /* 标签文字字号13px，小巧不抢焦点 */
    color: #3498db; /* 标签文字颜色：蓝色，清晰 */
    font-weight: 500; /* 字体粗细：半粗体，突出分类 */
}

/* 词条操作按钮容器样式 */
.entry-ops {
    display: flex; /* 弹性布局：操作按钮横向排列 */
    gap: 8px; /* 按钮之间间距8px，不拥挤 */
}

/* 操作按钮通用样式 */
.entry-ops a {
    padding: 5px 12px; /* 内边距：上下5px，左右12px，点击区域充足 */
    font-size: 13px; /* 按钮文字字号13px，小巧 */
    border-radius: 6px; /* 圆角6px，精致 */
    text-decoration: none; /* 清除下划线，按钮样式更纯粹 */
    font-weight: 500; /* 字体粗细：半粗体，突出文字 */
}

/* 导出按钮样式 */
.entry-export-btn {
    background: #4CAF50; /* 绿色：与其他按钮区分 */
    color: #fff; /* 文字白色 */
}
.entry-export-btn:hover {
    background: #388E3C; /* hover深绿色 */
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 置顶按钮样式 */
.entry-top-btn {
    background: #e74c3c; /* 背景色：红色 */
    color: #fff; /* 文字颜色：白色 */
}

/* 置顶按钮激活状态（已置顶） */
.entry-top-btn.active {
    background: #2ecc71; /* 背景色：绿色，区分未置顶状态 */
}

/* 编辑按钮样式 */
.entry-edit-btn {
    background: #3498db; /* 背景色：蓝色 */
    color: #fff; /* 文字颜色：白色 */
}

/* 删除按钮样式 */
.entry-delete-btn {
    background: #95a5a6; /* 背景色：中灰色 */
    color: #fff; /* 文字颜色：白色 */
}

/* 操作按钮hover状态 */
.entry-ops a:hover {
    transform: translateY(-1px); /* 向上偏移1px，增强交互感 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 轻微阴影，突出按钮 */
}



/* 词条内容区域样式（默认隐藏） */
.entry-content {
    margin-top: 15px; /* 上方外边距15px，与标题栏隔开 */
    padding-top: 15px; /* 上方内边距15px，与分隔线隔开 */
    border-top: 1px dashed #eee; /* 上方分隔线：虚线，淡灰色，区分标题和内容 */
    display: none; /* 默认隐藏内容 */
    color: #4a5568; /* 内容文字颜色：中灰色，不刺眼 */
    font-size: 15px; /* 内容文字字号15px，易读 */
}

/* 词条内容显示状态 */
.entry-content.show {
    display: block; /* 显示内容：块级元素，独占一行 */
    animation: fadeIn 0.3s ease; /* 淡入动画：0.3秒平滑显示 */
}

/* 淡入动画定义 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); } /* 动画开始：透明度0，向下偏移5px */
    to { opacity: 1; transform: translateY(0); } /* 动画结束：透明度1，回到原位置 */
}

/* 词条操作区域样式（编辑/删除等，已弃用，保留兼容） */
.entry-actions {
    margin-top: 15px; /* 上方外边距15px，与内容隔开 */
    display: flex; /* 弹性布局：按钮横向排列 */
    gap: 10px; /* 按钮之间间距10px */
}

/* 悬浮导航栏样式 */
.float-nav {
    position: fixed; /* 固定定位：不随页面滚动，始终在右侧 */
    top: 50%; /* 垂直居中：距离顶部50% */
    right: 30px; /* 距离右侧30px，不贴边 */
    transform: translateY(-50%); /* 垂直居中修正：向上偏移自身50%，实现完美居中 */
    background: #fff; /* 背景色：白色，突出导航 */
    border-radius: 10px; /* 圆角10px，现代感 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* 轻微阴影，增强层次感 */
    padding: 12px 0; /* 上下内边距12px，左右0，内部链接不贴边 */
    z-index: 999; /* 层级999：高于其他元素，不被遮挡 */
    border: 1px solid #f0f0f0; /* 浅灰色边框，提升精致感 */
}

/* 悬浮导航链接样式 */
.float-nav a {
    display: block; /* 块级元素：链接独占一行，点击区域充足 */
    padding: 13px 22px; /* 内边距：上下13px，左右22px，链接大小适中 */
    color: #333; /* 文字颜色：深灰色，清晰 */
    text-decoration: none; /* 清除下划线 */
    font-size: 14px; /* 文字字号14px，适中 */
    white-space: nowrap; /* 不换行：链接文字始终在一行，避免错乱 */
    font-weight: 500; /* 字体粗细：半粗体，突出文字 */
}

/* 悬浮导航链接hover状态 */
.float-nav a:hover {
    background: #f8f9fa; /* 背景色：淡灰色，反馈hover */
    color: #3498db; /* 文字颜色：蓝色，突出当前链接 */
    padding-left: 25px; /* 向左偏移3px，增强交互感 */
}

/* 悬浮导航激活状态（当前所在页面） */
.float-nav .active {
    background: #3498db; /* 背景色：蓝色，突出激活状态 */
    color: #fff; /* 文字颜色：白色，对比强烈 */
    position: relative; /* 相对定位，为左侧装饰线做准备 */
}

/* 激活状态左侧装饰线 */
.float-nav .active::before {
    content: ""; /* 伪元素：纯样式元素 */
    display: block; /* 块级元素：独占一行 */
    width: 3px; /* 装饰线宽度3px */
    height: 100%; /* 装饰线高度：占满链接高度 */
    background: #2980b9; /* 装饰线颜色：深蓝色，比背景深 */
    position: absolute; /* 绝对定位：相对于激活链接 */
    left: 0; /* 距离左侧0，贴边 */
    top: 0; /* 距离顶部0，贴边 */
}

/* 悬浮导航分隔线样式 */
.float-nav .divider {
    height: 1px; /* 分隔线高度1px */
    background: #f0f0f0; /* 分隔线颜色：淡灰色 */
    margin: 8px 0; /* 上下外边距8px，与链接隔开 */
}

/* 添加分类按钮样式 */
.float-nav .add-cate-btn {
    background: #2ecc71; /* 背景色：绿色，与其他链接区分 */
    color: #fff; /* 文字颜色：白色 */
}

/* 添加分类按钮hover状态 */
.float-nav .add-cate-btn:hover {
    background: #27ae60; /* 背景色：深绿色，反馈hover */
    padding-left: 22px; /* 取消偏移：绿色按钮特殊处理，保持对齐 */
}

/* 搜索关键词高亮样式 */
.highlight {
    background: #fff3cd; /* 背景色：淡黄色，不刺眼 */
    color: #d9534f; /* 文字颜色：红色，突出关键词 */
    padding: 2px 4px; /* 内边距：上下2px，左右4px，包裹关键词 */
    border-radius: 3px; /* 圆角3px，精致 */
    font-weight: 500; /* 字体粗细：半粗体，突出关键词 */
}

/* 弹窗样式（上传图片/Word/Excel） */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    width: 420px;
    position: relative;
}
.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
}
.modal-close:hover {
    color: #e74c3c;
}
.upload-form .form-group {
    margin: 15px 0;
}
.upload-btn {
    padding: 10px 20px;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}