/* 基础容器样式 - 设置整个页面的基本布局和背景 */
        body {
            margin: 0;
            padding: 0; /* 移除内边距 */
            min-height: 100vh; /* 确保至少占满整个视口高度 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            background: url('resources/bg.jpg') no-repeat center center fixed; /* 设置背景图片 */
            background-size: cover; /* 背景图片覆盖整个区域 */
            font-family: 'Microsoft YaHei', sans-serif; /* 设置字体为微软雅黑 */
        }

        /* 动态背景样式 - 当背景图片不存在时自动应用的渐变色背景和动画 */
        body.dynamic-bg {
            /* 重置背景图片 */
            background-image: none;
            /* 渐变背景 - 从青色到紫色的渐变，给人愉悦的视觉效果 */
            background: linear-gradient(200deg,#187f83,#3f35a8);
            /* 溢出隐藏 - 防止动画元素导致滚动条出现 */
            overflow: hidden;
            /* 确保内容居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* 动画元素默认隐藏 - 只有在动态背景模式下才显示浮动方块和圆形 */
        .square, .circle {
            display: none;
            position: fixed; /* 改为固定定位，不影响文档流 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* 确保在内容后面，不遮挡主要内容 */
            pointer-events: none; /* 不接收鼠标事件，允许点击穿透到下方元素 */
        }
        
        /* 动态背景时显示动画元素 - 当使用动态背景时激活动画效果 */
        body.dynamic-bg .square,
        body.dynamic-bg .circle {
            display: block; /* 显示动画元素 */
        }

        /* 动画元素样式 - 设置方块和圆形的基本样式 */
        ul li {
            position: absolute; /* 绝对定位，可以自由放置在页面任何位置 */
            border: 1px solid #fff; /* 白色边框 */
            background-color: #fff; /* 白色背景 */
            width: 30px;
            height: 30px;
            list-style: none; /* 移除列表样式点 */
            opacity: 0; /* 初始透明度为0，通过动画显示 */
        }

        /* 方块动画元素 - 设置方块的位置和动画 */
        .square li {
            top: 40vh;
            left: 60vw;
            /* 执行动画：动画名 时长 线性的 无限次播放 */
            animation: square 10s linear infinite;
        }

        /* 设置不同方块的位置和动画延迟，创造错落有致的效果 */
        .square li:nth-child(2) {
            top: 80vh;
            left: 10vw;
            /* 设置动画延迟时间 */
            animation-delay: 2s;
        }

        .square li:nth-child(3) {
            top: 80vh;
            left: 85vw;
            /* 设置动画延迟时间 */
            animation-delay: 4s;
        }

        .square li:nth-child(4) {
            top: 10vh;
            left: 70vw;
            /* 设置动画延迟时间 */
            animation-delay: 6s;
        }

        .square li:nth-child(5) {
            top: 10vh;
            left: 10vw;
            /* 设置动画延迟时间 */
            animation-delay: 8s;
        }

        /* 圆形动画元素 - 设置圆形的位置和动画 */
        .circle li {
            bottom: 0;
            left: 15vw;
            /* 执行动画 - 圆形有不同的动画效果 */
            animation: circle 10s linear infinite;
        }

        /* 设置不同圆形的位置和动画延迟，创造错落有致的效果 */
        .circle li:nth-child(2) {
            left: 35vw;
            /* 设置动画延迟时间 */
            animation-delay: 2s;
        }

        .circle li:nth-child(3) {
            left: 55vw;
            /* 设置动画延迟时间 */
            animation-delay: 6s;
        }

        .circle li:nth-child(4) {
            left: 75vw;
            /* 设置动画延迟时间 */
            animation-delay: 4s;
        }

        .circle li:nth-child(5) {
            left: 90vw;
            /* 设置动画延迟时间 */
            animation-delay: 8s;
        }

        /* 定义方块动画 - 从方形变为圆形，并向上移动 */
        @keyframes square {
            0% {
                transform: scale(0) rotateY(0deg); /* 初始大小为0，不旋转 */
                opacity: 1; /* 完全不透明 */
            }
            100% {
                transform: scale(5) rotateY(1000deg); /* 放大5倍并旋转1000度 */
                opacity: 0; /* 完全透明 */
            }
        }

        /* 定义圆形动画 - 从方形变为圆形，并向上移动 */
        @keyframes circle {
            0% {
                transform: scale(0) rotateY(0deg); /* 初始大小为0，不旋转 */
                opacity: 1; /* 完全不透明 */
                bottom: 0; /* 初始位置在底部 */
                border-radius: 0; /* 初始为方形 */
            }
            100% {
                transform: scale(5) rotateY(1000deg); /* 放大5倍并旋转1000度 */
                opacity: 0; /* 完全透明 */
                bottom: 90vh; /* 移动到接近顶部 */
                border-radius: 50%; /* 变为圆形 */
            }
        }

        /* 主内容容器 - 包含所有功能组件的半透明白色容器 */
        .content-container {
            width: 800px; /* 设置宽度 */
            height: 600px; /* 设置高度 */
            background: rgba(255, 255, 255, 0.8); /* 半透明白色背景，确保背景图片或动画可见 */
            border-radius: 15px; /* 圆角边框，使外观更现代 */
            padding: 30px 30px; /* 内边距：上下30px，左右30px */
            box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.3); /* 添加阴影效果，增强立体感 */
            text-align: center; /* 文本居中 */
            backdrop-filter: blur(5px); /* 背景模糊效果，增强视觉层次感 */
            position: relative; /* 相对定位，作为子元素的定位参考 */
            z-index: 2; /* 确保在动画元素上方，不被动画遮挡 */
            display: flex; /* 使用弹性布局 */
            flex-direction: column; /* 垂直排列子元素 */
            justify-content: space-between; /* 子元素之间均匀分布，充分利用空间 */
        }

        /* 输入方式选择区域 - 包含下拉菜单和按钮的顶部区域 */
        .input-methods {
            width: 100%;
            margin: 0 auto 0px; /* 上0 左右auto 下0px */
            display: flex; /* 使用弹性布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            gap: 30px; /* 元素之间的间距 */
            padding: 0; /* 移除内边距 */
            position: relative; /* 添加相对定位，作为下拉菜单的参考 */
        }

        /* 下拉菜单容器样式 */
        .input-methods .custom-select {
            width: 160px; /* 与按钮宽度一致 */
            margin: 0;
        }

        /* 按钮组样式 - 包含"名单导入"和"临时输入"按钮 */
        .input-methods .button-group {
            display: flex; /* 使用弹性布局 */
            gap: 30px; /* 按钮之间的间距 */
            margin-left: 0; /* 移除左边距，让所有按钮间距一致 */
        }

        /* 下拉菜单样式 - 自定义下拉菜单的基本样式 */
        .custom-select {
            position: relative; /* 相对定位，作为下拉项的定位参考 */
            cursor: pointer; /* 鼠标指针变为手型 */
            z-index: 3; /* 确保下拉菜单在其他元素上方 */
            width: 160px; /* 确保与按钮宽度一致 */
        }

        /* 下拉菜单选中项样式 - 显示当前选中的选项 */
        .select-selected {
            padding: 14px 28px; /* 内边距与按钮一致 */
            border: none;
            border-radius: 12px; /* 圆角边框 */
            background: #3498db; /* 背景色 */
            color: white; /* 白色文字 */
            position: relative;
            transition: all 0.2s ease; /* 平滑过渡效果 */
            text-align: center;
            font-size: 22px; /* 字体大小 */
            width: 100%; /* 宽度填充父容器 */
            display: block; /* 块级元素 */
            box-sizing: border-box; /* 确保padding不会增加总宽度 */
        }
        
        /* 下拉菜单悬停效果 - 鼠标悬停时轻微上浮并添加阴影 */
        .select-selected:hover { 
            transform: translateY(-2px); /* 向上移动2px */
            box-shadow: 0 3px 10px rgba(0,0,0,0.2); /* 添加阴影效果 */
        }
        
        /* 下拉菜单项容器 - 包含所有可选项的容器 */
        .select-items {
            position: absolute; /* 绝对定位，相对于.custom-select */
            top: 100%; /* 位于选中项下方 */
            left: 0;
            right: 0;
            background: white; /* 白色背景 */
            border-radius: 12px; /* 圆角边框 */
            box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 添加阴影效果 */
            margin-top: 5px; /* 与选中项之间的间距 */
            display: none; /* 默认隐藏 */
            z-index: 1000; /* 确保在其他元素上方 */
            max-height: 300px; /* 最大高度 */
            overflow-y: auto; /* 内容过多时显示滚动条 */
            width: 100%; /* 宽度与选中项一致 */
        }

        /* 下拉菜单单个选项样式 */
        .select-item {
            padding: 14px; /* 内边距 */
            transition: all 0.2s; /* 平滑过渡效果 */
            border-bottom: 1px solid #eee; /* 底部边框 */
            text-align: center;
            font-size: 20px; /* 字体大小 */
        }

        /* 第一个选项的特殊样式 - 顶部圆角 */
        .select-item:first-child {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        /* 最后一个选项的特殊样式 - 底部圆角和无边框 */
        .select-item:last-child {
            border-bottom: none;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        /* 选项悬停效果 - 鼠标悬停时变为蓝色背景白色文字 */
        .select-item:hover {
            background: #3498db; /* 背景色 */
            color: white; /* 白色文字 */
            cursor: pointer; /* 鼠标指针变为手型 */
        }

        /* 按钮统一样式 - 所有按钮的基本样式 */
        button {
            padding: 14px 28px; /* 内边距 */
            font-size: 22px; /* 字体大小 */
            border: none;
            border-radius: 12px; /* 圆角边框 */
            cursor: pointer; /* 鼠标指针变为手型 */
            transition: all 0.2s ease; /* 平滑过渡效果 */
            width: 160px; /* 按钮宽度 */
            color: white; /* 白色文字 */
        }

        /* 按钮悬停效果 - 鼠标悬停时轻微上浮并添加阴影 */
        button:hover { 
            transform: translateY(-2px); /* 向上移动2px */
            box-shadow: 0 3px 10px rgba(0,0,0,0.2); /* 添加阴影效果 */
        }

        /* 禁用按钮样式 - 当按钮不可点击时的样式（灰色+鼠标指针变为禁止符号） */
        button:disabled { 
            background: #95a5a6; /* 灰色背景，表示按钮不可用 */
            cursor: not-allowed; /* 鼠标指针变为禁止符号 */
            opacity: 0.7; /* 降低透明度，使按钮看起来不可用 */
        }

        /* 按钮颜色样式 - 为不同功能的按钮设置不同颜色，使界面更直观 */
         button#startStopBtn, button#startStopBtn:enabled { background: #1aa15d; } /* 开始抽签按钮颜色 */
         button#historyBtn, button#historyBtn:enabled { background: #5a64d3; } /* 历史记录按钮颜色 */
         button#manageListBtn, button#manageListBtn:enabled { background: #3498db; } /* 名单管理按钮颜色 */
         .modal-buttons button:first-child:not(.close-btn):enabled { background: #d13e3e; } /* 模态框取消按钮颜色 */
         .modal-buttons button:last-child:not(.close-btn):enabled { background: #1aa15d; } /* 模态框确定按钮颜色 */
         button.close-btn:enabled, .close-btn:enabled { background: #7c7d85; } /* 关闭按钮颜色，统一所有关闭按钮的样式 */
         button#importNameListBtn, button#importNameListBtn:enabled { background: #3498db; } /* 导入名单按钮颜色 */
         button#deleteNameListBtn, button#deleteNameListBtn:enabled { background: #d13e3e; } /* 删除名单按钮颜色 */

        /* 标题样式 - 页面主标题的样式 */
        #title { 
            color: #2c3e50; /* 深灰色 */
            margin: 0 0 10px 0; /* 上0 右0 下10px 左0 */
            font-size: 3em; /* 大字体 */
            font-weight: bold; /* 粗体 */
        }

        /* 显示框样式 - 中央显示抽签结果的区域 */
        #displayBox {
            width: 88%;
            height: 300px; /* 高度 */
            margin: 0px auto 0px; /* 上0px 左右auto 下0px */
            border: 4px solid #3498db; /* 蓝色粗边框 */
            border-radius: 15px; /* 圆角边框 */
            font-size: 50px; /* 大字体 */
            display: flex; /* 使用弹性布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            background: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
            transition: all 0.3s ease; /* 平滑过渡效果，用于抽签时的动画 */
        }

        /* 底部按钮组样式 - 包含名单管理、抽签记录和开始抽签三个功能按钮 */
        .bottom-buttons {
            display: flex; /* 使用弹性布局，按钮水平排列 */
            justify-content: center; /* 水平居中 */
            gap: 35px; /* 按钮之间的间距 */
            margin-top: 10px;   
            margin-bottom: 10px; /* 上10px 下10px */
        }

        /* 临时输入弹窗样式 - 输入临时名单的模态框 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位，相对于视口 */
            top: 0; 
            left: 0; 
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5); /* 半透明黑色背景 */
            z-index: 1000; /* 确保在其他元素上方 */
        }

        /* 模态框内容样式 */
        .modal-content {
            position: absolute; /* 绝对定位 */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 居中定位 */
            background: white; /* 白色背景 */
            padding: 30px; /* 内边距 */
            border-radius: 15px; /* 圆角边框 */
            width: 90%;
            max-width: 500px; /* 最大宽度 */
            box-shadow: 0 4px 20px rgba(0,0,0,0.2); /* 添加阴影效果 */
        }

        /* 模态框标题样式 */
        .modal h2 {
            color: #2c3e50; /* 深灰色 */
            margin: 0 0 20px 0; /* 上0 右0 下20px 左0 */
            font-size: 1.8em; /* 字体大小 */
        }

        /* 文本输入框样式 - 临时输入名单的文本框 */
        .modal textarea {
            width: 100%;
            height: 200px; /* 高度 */
            margin: 10px 0;
            padding: 15px; /* 内边距 */
            border: 2px solid #3498db; /* 蓝色边框 */
            border-radius: 12px; /* 圆角边框 */
            font-size: 18px; /* 字体大小 */
            resize: vertical; /* 只允许垂直调整大小 */
            box-sizing: border-box; /* 确保padding不会增加总宽度 */
            outline-color: #3498db; /* 聚焦时的轮廓颜色 */
        }
        
        /* 文本框聚焦样式 - 确保聚焦时边框颜色不变 */
        .modal textarea:focus {
            border-color: #3498db; /* 保持蓝色边框 */
            outline: none; /* 移除默认的聚焦轮廓 */
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); /* 添加蓝色阴影效果 */
        }

        /* 模态框按钮容器样式 */
        .modal-buttons {
            display: flex; /* 使用弹性布局 */
            justify-content: center; /* 水平居中 */
            gap: 15px; /* 按钮之间的间距 */
            margin-top: 20px;
        }

        /* 历史记录弹窗样式 - 显示抽签历史的模态框 */
        .history-modal {
            display: none; /* 默认隐藏，点击"抽签记录"按钮后显示 */
            position: fixed; /* 固定定位，覆盖整个屏幕 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5); /* 半透明黑色背景，产生遮罩效果 */
            z-index: 1000; /* 确保在其他元素上方，不被遮挡 */
        }

        /* 历史记录内容样式 - 历史记录弹窗的白色内容区域 */
        .history-content {
            position: absolute; /* 绝对定位 */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 水平垂直居中定位 */
            background: white; /* 白色背景 */
            padding: 30px; /* 内边距，使内容不贴边 */
            border-radius: 15px; /* 圆角边框，使外观更现代 */
            width: 90%;
            max-width: 600px; /* 最大宽度，适应不同屏幕 */
            box-shadow: 0 4px 20px rgba(0,0,0,0.2); /* 添加阴影，增强立体感 */
        }

        /* 历史记录列表容器样式 - 包含所有历史记录项的容器 */
        .history-list {
            margin-top: 20px;
            display: flex; /* 使用弹性布局 */
            flex-direction: column; /* 垂直排列各行 */
            align-items: center; /* 水平居中对齐 */
        }

        /* 历史记录行样式 - 每行最多显示4个抽签结果 */
        .history-row {
            display: flex; /* 使用弹性布局 */
            flex-wrap: wrap; /* 允许换行，适应不同屏幕宽度 */
            margin-bottom: 15px;
            justify-content: center; /* 水平居中对齐 */
            width: 100%;
            max-width: 550px; /* 控制整体宽度 */
        }

        /* 历史记录项样式 - 单个抽签结果的样式，带有箭头连接 */
        .history-item {
            background: #f8f9fa; /* 浅灰色背景 */
            padding: 18px 15px; /* 内边距 */
            border-radius: 12px; /* 圆角边框 */
            border: 1px solid #e9ecef; /* 浅灰色边框 */
            font-size: 24px; /* 字体大小 */
            color: #2c3e50; /* 深灰色文字 */
            width: 18%; /* 宽度，确保每行能放下4个名字和箭头 */
            box-sizing: border-box; /* 确保padding不会增加总宽度 */
            margin: 0 25px 10px 0; /* 上0 右25px 下10px 左0 */
            text-align: center; /* 文本居中 */
            position: relative; /* 相对定位，用于放置箭头 */
        }
        
        /* 箭头样式 - 在历史记录项之间显示蓝色箭头，表示抽签顺序 */
        .history-item::after {
            content: "→"; /* 箭头符号 */
            position: absolute; /* 绝对定位，相对于.history-item */
            right: -22px; /* 位于项目右侧 */
            top: 50%;
            transform: translateY(-50%); /* 垂直居中 */
            color: #3498db; /* 蓝色，与主题色一致 */
            font-size: 18px; /* 字体大小 */
            font-weight: bold; /* 粗体，使箭头更明显 */
        }
        
        /* 最后一项不显示箭头 - 避免多余的箭头显示 */
        .history-item.last-item::after {
            display: none; /* 隐藏最后一项的箭头 */
        }
        
        /* 隐藏文件输入框 */
        #fileInput {
            display: none;
        }
        
        /* 音效开关按钮样式 - 右上角控制声音开关的图标按钮 */
        .sound-toggle {
            position: absolute; /* 绝对定位，固定在容器右上角 */
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            cursor: pointer; /* 鼠标指针变为手型，表示可点击 */
            transition: transform 0.2s; /* 点击时的平滑过渡效果 */
            z-index: 10; /* 确保在其他元素上方，不被遮挡 */
            background-size: cover; /* 确保背景图片（喇叭图标）完全覆盖按钮 */
        }
        
        /* 音效开关悬停效果 - 鼠标悬停时轻微放大 */
        .sound-toggle:hover {
            transform: scale(1.1); /* 放大1.1倍 */
        }

        /* 历史记录标题样式 */
        .history-content h2 {
            color: #3498db; /* 蓝色，与箭头颜色一致 */
            text-align: center; /* 文本居中 */
            margin: 0 0 25px 0; /* 上0 右0 下25px 左0 */
            font-size: 2.2em; /* 字体大小 */
            font-weight: bold; /* 粗体 */
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 添加轻微文字阴影 */
            padding-bottom: 15px; /* 底部内边距 */
            border-bottom: 2px solid #3498db; /* 底部边框 */
            width: 70%; /* 控制边框宽度 */
            margin-left: auto; /* 自动左边距 */
            margin-right: auto; /* 自动右边距 */
        }
        
        /* 提示弹窗样式 - 显示警告或提示信息的模态框 */
        .alert-modal {
            display: none; /* 默认隐藏，需要时显示 */
            position: fixed; /* 固定定位，覆盖整个屏幕 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5); /* 半透明黑色背景，产生遮罩效果 */
            z-index: 1000; /* 确保在其他元素上方，不被遮挡 */
        }
        
        /* 提示弹窗内容样式 - 提示弹窗的白色内容区域 */
        .alert-content {
            position: absolute; /* 绝对定位 */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 水平垂直居中定位 */
            background: white; /* 白色背景 */
            padding: 30px; /* 内边距，使内容不贴边 */
            border-radius: 15px; /* 圆角边框，使外观更现代 */
            width: 90%;
            max-width: 400px; /* 最大宽度，适应不同屏幕 */
            box-shadow: 0 4px 20px rgba(0,0,0,0.2); /* 添加阴影，增强立体感 */
            text-align: center; /* 文本居中 */
        }
        
        /* 提示弹窗图标样式 - 弹窗顶部的警告图标 */
        .alert-icon {
            font-size: 40px; /* 大字体，使图标明显 */
            margin-bottom: 15px;
            color: #e74c3c; /* 红色，表示警告 */
        }
        
        /* 提示弹窗消息样式 - 弹窗中的提示文本 */
        .alert-message {
            font-size: 22px; /* 字体大小 */
            margin-bottom: 25px;
            color: #2c3e50; /* 深灰色文字 */
        }
        
        /* 名单列表按钮样式 - 顶部显示当前选中名单的蓝色边框按钮 */
        .name-list-btn {
            width: 80%;
            height: 60px;
            background: white;
            border: 4px solid #3498db; /* 蓝色边框，与主题色一致 */
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #2c3e50;
            cursor: pointer; /* 鼠标指针变为手型，表示可点击 */
            transition: all 0.2s ease; /* 点击和悬停时的平滑过渡效果 */
            margin-bottom: 10px;
            margin-left: auto;
            margin-right: auto;
            position: relative; /* 相对定位，用于放置下拉箭头 */
        }
        
        .name-list-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        
        /* 添加下拉箭头 - 名单列表按钮右侧的向下箭头，表示可以展开 */
        .name-list-btn::after {
            content: '';
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid #3498db; /* 蓝色箭头，与按钮边框颜色一致 */
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%); /* 垂直居中箭头 */
            transition: transform 0.2s; /* 箭头旋转的平滑过渡效果 */
        }
        
        /* 下拉菜单展开时箭头旋转 */
        .name-list-btn.active::after {
            transform: translateY(-50%) rotate(180deg);
        }
        
        /* 名单列表下拉菜单样式 - 点击名单列表按钮后显示的下拉菜单 */
        .name-list-dropdown {
            position: absolute; /* 绝对定位，确保正确显示在按钮下方 */
            top: 70px; /* 固定位置在按钮下方 */
            left: 50%;
            transform: translateX(-50%); /* 水平居中对齐 */
            width: 80%;
            background: white; /* 白色背景 */
            border-radius: 12px; /* 圆角边框 */
            box-shadow: 0 4px 20px rgba(0,0,0,0.2); /* 添加阴影，增强立体感 */
            max-height: 0; /* 初始高度为0，不显示内容 */
            overflow: hidden; /* 隐藏溢出内容 */
            transition: max-height 0.3s ease; /* 平滑展开/收起动画 */
            z-index: 1000; /* 确保在其他元素上方显示 */
        }
        
        /* 下拉菜单激活状态 - 展开时的样式 */
        .name-list-dropdown.active {
            max-height: 400px; /* 展开后的最大高度 */
            overflow-y: auto; /* 内容超出时显示垂直滚动条 */
            scrollbar-width: none; /* Firefox隐藏滚动条 */
            -ms-overflow-style: none; /* IE和Edge隐藏滚动条 */
        }
        
        /* 隐藏Chrome, Safari和Opera浏览器的滚动条，使界面更简洁 */
        .name-list-dropdown.active::-webkit-scrollbar {
            display: none; /* 完全隐藏滚动条 */
        }
        
        .name-list-container {
            padding: 8px;
        }
        
        /* 名单项样式 - 下拉菜单中每个可选名单的样式 */
        .name-item {
            padding: 10px 15px;
            background: #f8f9fa; /* 浅灰色背景 */
            border-radius: 10px; /* 圆角边框 */
            margin-bottom: 5px; /* 项目间距 */
            cursor: pointer; /* 鼠标指针变为手型，表示可点击 */
            transition: all 0.2s; /* 悬停效果的平滑过渡 */
            border: 1px solid #e9ecef; /* 浅灰色边框 */
            font-size: 20px;
        }
        
        /* 名单项悬停效果 - 鼠标悬停时变色 */
        .name-item:hover {
            background: #e9ecef; /* 鼠标悬停时背景色变深 */
        }
        
        /* 当前选中的名单项 - 蓝色背景白色文字突出显示 */
        .name-item.active {
            background: #3498db; /* 蓝色背景，与主题色一致 */
            color: white; /* 白色文字，增强对比度 */
        }
        
        /* 名单管理弹窗样式 */
        .name-management-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
        }
        
        .name-management-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 30px;
            border-radius: 15px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            text-align: center;
        }
        
        .name-management-content h2 {
            color: #3498db;
            margin-bottom: 25px;
            font-size: 2em;
        }
        
        .management-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .management-buttons button {
            width: 100%;
        }