/* ============================================
   全局CSS变量定义
   ============================================ */
:root {
    /* 主要主题配色 - 参考官网配色 */
    --primary-color: #501468;      /* 主要按钮和链接颜色 - 深紫色 */
    --secondary-color: #320744;    /* 悬停状态颜色 - 更深的紫色 */
    --background-color: #f4e9d8;   /* 页面背景色 - 米黄色 */
    --text-color: #333;            /* 主要文字颜色 - 深灰色 */
    --border-color: #d4c1a4;       /* 边框颜色 - 浅棕色 */
    --header-bg-color: #3d055f;    /* 页头背景色 - 深紫色 */
    --header-text-color: #fff;     /* 页头文字颜色 - 白色 */
    --card-bg-color: #fff;         /* 卡片背景色 - 白色 */
    --hover-color: #f8f0e2;        /* 悬停背景色 - 浅米色 */

    /* 不同角色类型的配色方案 */
    --townsfolkRoles-color: #27076f;   /* 镇民角色 - 深蓝色 */
    --outsidersRoles-color: #086359;   /* 外来者角色 - 深青色 */
    --minionRoles-color: #da820f;      /* 爪牙角色 - 橙色 */
    --demonRoles-color: #f40c0c;       /* 恶魔角色 - 红色 */
    --travellerRoles-color: #550388;   /* 旅行者角色 - 紫色 */
    --fabledRoles-color: #e6d708;     /* 传奇角色 - 金黄色 */
}

/* ============================================
   页面主体样式
   ============================================ */
body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;  /* 使用微软雅黑字体族 */
    padding: 0;                                         /* 移除默认内边距 */
    background-color: var(--background-color);          /* 使用全局变量设置背景色 */
    color: var(--text-color);                          /* 使用全局变量设置文字颜色 */
    margin: 0;                                         /* 移除默认外边距 */
}

/* ============================================
   页头样式
   ============================================ */
.header {
    background-color: var(--header-bg-color);          /* 页头背景色 - 深紫色 */
    color: var(--header-text-color);                   /* 页头文字颜色 - 白色 */
    padding: 20px;                                     /* 页头内边距 */
    text-align: center;                                /* 文字居中对齐 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);         /* 添加轻微阴影效果 */
}

/* 页头主标题样式 */
.header h1 {
    margin: 0;                                         /* 移除标题外边距 */
    color: var(--header-text-color);                   /* 继承页头文字颜色 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);     /* 添加文字阴影增强可读性 */
}

/* 页头副标题样式 */
.header h4 {
    color: var(--header-text-color);                   /* 继承页头文字颜色 */
    margin: 10px 0 0;                                 /* 上边距10px，左右和下边距为0 */
}

/* ============================================
   主体容器和布局样式
   ============================================ */
/* 主体容器样式 */
.container {
    max-width: 1200px;                               /* 最大宽度限制 */
    margin: 0 auto;                                   /* 水平居中 */
    padding: 20px;                                    /* 容器内边距 */
}

/* 剧本选择区域样式 */
.script-selection {
    margin: 20px 0;                                  /* 上下外边距20px */
    padding: 20px;                                    /* 内边距 */
    background: var(--card-bg-color);                /* 卡片背景色 - 白色 */
    border-radius: 8px;                               /* 圆角边框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);         /* 卡片阴影效果 */
    display: flex;                                    /* 使用flex布局 */
    flex-wrap: wrap;                                  /* 允许换行 */
    gap: 15px;                                        /* 元素间距 */
    transition: transform 0.2s ease;                 /* 悬停动画过渡 */
}

/* 剧本选择区域悬停效果 */
.script-selection:hover {
    transform: translateY(-3px);                       /* 悬停时向上移动3px */
}

/* 剧本选择标签样式 */
.script-selection label {
    margin-right: 15px;                               /* 右外边距 */
    cursor: pointer;                                  /* 鼠标指针样式 */
    display: flex;                                    /* flex布局 */
    align-items: center;                               /* 垂直居中对齐 */
    gap: 5px;                                         /* 复选框和文字间距 */
    transition: color 0.3s ease;                      /* 颜色变化过渡 */
}

/* 剧本选择标签悬停效果 */
.script-selection label:hover {
    color: var(--primary-color);                      /* 悬停时变为主色调 */
}

/* ============================================
   搜索功能样式
   ============================================ */
/* 搜索容器样式 */
.search-container {
    margin: 20px 0;                                  /* 上下外边距20px */
    padding: 20px;                                    /* 内边距 */
    background: var(--card-bg-color);                /* 卡片背景色 - 白色 */
    border-radius: 8px;                               /* 圆角边框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);         /* 卡片阴影效果 */
    transition: transform 0.2s ease;                 /* 悬停动画过渡 */
}

.search-container:hover {
    transform: translateY(-3px);                       /* 悬停时向上移动3px */
}

/* 搜索输入框样式 */
#search-role-input, #search-script-input {
    width: 100%;                                      /* 宽度填满父容器 */
    padding: 12px 16px;                               /* 内边距（左右加大） */
    margin-bottom: 15px;                              /* 下外边距 */
    border: 2px solid var(--border-color);            /* 边框样式 */
    border-radius: 6px;                                /* 圆角 */
    font-size: 16px;                                  /* 字体大小 */
    box-sizing: border-box;                           /* 盒模型计算方式 */
    transition: all 0.3s ease;                        /* 所有属性过渡 */
    background-color: var(--card-bg-color);           /* 背景色 */
}

/* 搜索标签样式 */
.search-label {
    display: block;                                    /* 块级元素 */
    font-size: 14px;                                  /* 字体大小 */
    color: #666;                                      /* 标签颜色 */
    margin-bottom: 8px;                               /* 下边距 */
    font-weight: 500;                                 /* 中等字重 */
}

/* 搜索提示样式 */
.search-hint {
    font-size: 12px;                                  /* 提示文字大小 */
    color: #999;                                      /* 提示文字颜色 */
    margin-top: 5px;                                  /* 上边距 */
    font-style: italic;                               /* 斜体 */
}

/* 搜索输入框聚焦状态 */
#search-role-input:focus, #search-script-input:focus {
    outline: none;                                    /* 移除默认聚焦轮廓 */
    border-color: var(--primary-color);               /* 聚焦时边框变为主色调 */
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.15);   /* 增强聚焦阴影效果 */
    background-color: #f8fbfe;                         /* 聚焦时背景色 */
    transform: translateY(-1px);                      /* 轻微上浮效果 */
}

/* 搜索容器特定样式 */
.search-container:first-of-type {
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f8ff 100%); /* 角色搜索特殊背景 */
    border-left: 4px solid #3498db;                   /* 左侧装饰条 */
}

.search-container:last-of-type {
    background: linear-gradient(135deg, #f9f3e8 0%, #fff8f0 100%); /* 剧本搜索特殊背景 */
    border-left: 4px solid #e67e22;                   /* 左侧装饰条 */
}

/* 链接样式 */
.search-container a {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.search-container a:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 搜索结果下拉框样式 */
#search-results, #script-search-results {
    position: absolute;                                /* 绝对定位 */
    background: white;                                 /* 背景色 */
    border: 1px solid var(--border-color);            /* 边框 */
    max-height: 400px;                                /* 增加最大高度以容纳更多信息 */
    overflow-y: auto;                                  /* 垂直滚动 */
    z-index: 100;                                     /* 层级 */
    width: calc(100% - 40px);                         /* 宽度计算 */
    margin-top: -10px;                                /* 上外边距（重叠效果） */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);           /* 阴影效果 */
    border-radius: 4px;                                /* 圆角 */
}

/* 搜索结果项样式 */
.search-result-item {
    padding: 12px;                                    /* 增加内边距 */
    cursor: pointer;                                   /* 鼠标指针 */
    border-bottom: 1px solid #f0f0f0;                /* 底部边框 */
    transition: background-color 0.2s ease;         /* 背景色过渡 */
}

/* 搜索结果项悬停样式 */
.search-result-item:hover {
    background-color: #f8f9fa;                        /* 悬停背景色 */
}

/* 搜索结果头部样式 */
.search-result-header {
    display: flex;                                    /* flex布局 */
    justify-content: space-between;                   /* 两端对齐 */
    align-items: center;                              /* 垂直居中 */
    margin-bottom: 8px;                              /* 下边距 */
}

/* 角色名称样式 */
.role-name {
    font-weight: bold;                               /* 粗体 */
    font-size: 16px;                                /* 字体大小 */
    color: #333;                                    /* 深灰色 */
}

/* 角色类型样式 */
.role-type {
    font-size: 12px;                                /* 较小字体 */
    padding: 4px 8px;                              /* 内边距 */
    border-radius: 12px;                            /* 圆角 */
    background-color: #e9ecef;                      /* 浅灰色背景 */
    color: #495057;                                 /* 中等灰色 */
    font-weight: 500;                               /* 中等粗细 */
}

/* 角色能力样式 */
.role-ability {
    font-size: 13px;                                /* 较小字体 */
    color: #666;                                    /* 浅灰色 */
    line-height: 1.4;                              /* 行高 */
    max-height: 60px;                              /* 最大高度 */
    overflow: hidden;                               /* 超出隐藏 */
    text-overflow: ellipsis;                        /* 省略号 */
    display: -webkit-box;                           /* WebKit兼容性 */
    -webkit-line-clamp: 3;                          /* WebKit最多显示3行 */
    -webkit-box-orient: vertical;                  /* WebKit垂直方向 */
    display: -moz-box;                              /* Firefox兼容性 */
    -moz-line-clamp: 3;                             /* Firefox最多显示3行 */
    -moz-box-orient: vertical;                      /* Firefox垂直方向 */
    display: box;                                   /* 标准属性 */
    line-clamp: 3;                                  /* 标准最多显示3行 */
    box-orient: vertical;                           /* 标准垂直方向 */
}

/* ============================================
   按钮和链接样式
   ============================================ */
/* 基础按钮样式 */
button {
    padding: 12px 24px;                               /* 内边距 */
    font-size: 16px;                                  /* 字体大小 */
    margin-top: 20px;                                 /* 上外边距 */
    background-color: var(--primary-color);            /* 背景色 - 主色调 */
    color: white;                                      /* 文字颜色 */
    border: none;                                      /* 移除边框 */
    border-radius: 4px;                                /* 圆角 */
    cursor: pointer;                                  /* 鼠标指针 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* 过渡效果 */
}

/* 按钮悬停效果 */
button:hover {
    background-color: var(--secondary-color);          /* 悬停背景色 */
    transform: translateY(-2px);                        /* 悬停时向上移动 */
}

/* 选择信息显示区域 */
.selection-info {
    margin-bottom: 20px;                              /* 下外边距 */
    font-size: 16px;                                  /* 字体大小 */
    color: var(--text-color);                        /* 文字颜色 */
    background: var(--card-bg-color);                /* 卡片背景色 */
    padding: 15px;                                    /* 内边距 */
    border-radius: 8px;                                /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);         /* 阴影 */
    transition: transform 0.2s ease;                 /* 悬停动画 */
}

/* 选择信息悬停效果 */
.selection-info:hover {
    transform: translateY(-3px);                       /* 悬停时向上移动 */
}

/* 链接样式 */
a {
    color: var(--primary-color);                      /* 链接颜色 */
    text-decoration: none;                              /* 移除下划线 */
    transition: color 0.3s ease, transform 0.2s ease; /* 过渡效果 */
    display: block;                                    /* 块级元素 */
    text-align: center;                                /* 文字居中 */
    margin-bottom: 20px;                              /* 下外边距 */
}

/* 链接悬停效果 */
a:hover {
    color: var(--secondary-color);                    /* 悬停颜色 */
    transform: translateY(-2px);                       /* 悬停时向上移动 */
}

/* ============================================
   图片预览和卡片样式
   ============================================ */
/* 图片预览容器 - 用于隐藏图片 */
.image-preview {
    position: fixed;                                  /* 固定定位 */
    top: -9999px;                                    /* 移到屏幕外 */
    left: -9999px;                                   /* 移到屏幕外 */
}

/* 角色卡片样式 */
.role-card {
    background: white;                                /* 背景色 */
    padding: 20px;                                    /* 内边距 */
    margin: 10px;                                     /* 外边距 */
    border: 1px solid var(--border-color);            /* 边框 */
    max-width: 600px;                                 /* 最大宽度 */
    border-radius: 8px;                                /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);         /* 阴影效果 */
}

/* ============================================
   统一按钮系统样式
   ============================================ */
/* 统一按钮基础样式 - 应用于所有按钮类型 */
button, 
.load-json-button,
.dir-button,
.save-dir-button, 
.cancel-dir-button,
.meta-info-button,
.cancel-meta-info-button,
.save-meta-info-button,
.add-state-btn,
.violet-button {
    padding: 12px 24px;                               /* 内边距 */
    font-size: 16px;                                  /* 字体大小 */
    border: none;                                      /* 移除边框 */
    border-radius: 12px;                               /* 圆角（更大的圆角） */
    cursor: pointer;                                  /* 鼠标指针 */
    transition: all 0.3s ease;                       /* 所有属性过渡 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);         /* 阴影效果 */
    margin-top: 20px;                                 /* 上外边距 */
}

/* 所有按钮悬停效果 */
button:hover, 
.load-json-button:hover,
.dir-button:hover,
.save-dir-button:hover, 
.cancel-dir-button:hover,
.meta-info-button:hover,
.cancel-meta-info-button:hover,
.save-meta-info-button:hover,
.add-state-btn:hover,
.violet-button:hover {
    transform: translateY(-3px);                        /* 悬停时向上移动 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);        /* 增强阴影 */
}

/* 所有按钮点击效果 */
button:active, 
.load-json-button:active,
.dir-button:active,
.save-dir-button:active, 
.cancel-dir-button:active,
.meta-info-button:active,
.cancel-meta-info-button:active,
.save-meta-info-button:active,
.add-state-btn:active,
.violet-button:active {
    transform: translateY(-1px);                        /* 点击时轻微上移 */
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);         /* 减弱阴影 */
}

/* 保留原有按钮颜色 - 主要按钮 */
button {
    background-color: var(--primary-color);            /* 主色调背景 */
    color: white;                                      /* 白色文字 */
}

/* 次要按钮组 - 灰紫色系 */
.toggle-json-button,
.role-button,
.add-state-btn,
.meta-info-button,
.dir-button {
    background-color: #6b6b87;                       /* 灰紫色背景 */
    color: white;                                      /* 白色文字 */
}

/* 次要按钮组悬停效果 */
.toggle-json-button:hover,
.role-button:hover,
.add-state-btn:hover,
.meta-info-button:hover,
.dir-button:hover {
    background-color: #5a5a75;                       /* 悬停时变深的灰紫色 */
}

/* 特定按钮的重复悬停效果（可能需要合并） */
.add-state-btn:hover,
.meta-info-button:hover,
.dir-button:hover {
    background-color: #5a5a75;                       /* 悬停背景色 */
    transform: translateY(-3px);                        /* 向上移动 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);        /* 增强阴影 */
}

/* ============================================
   搜索结果和角色类型标题样式
   ============================================ */
/* 搜索结果容器样式（重新定义覆盖） */
#search-results {
    position: absolute;                                /* 绝对定位 */
    background-color: white;                           /* 白色背景 */
    border: 1px solid #ddd;                           /* 浅灰边框 */
    border-radius: 4px;                                /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);         /* 阴影 */
    max-height: 200px;                                /* 最大高度 */
    overflow-y: auto;                                  /* 垂直滚动 */
    z-index: 1000;                                     /* 高层级 */
}

/* 搜索结果项样式 */
#search-results div {
    padding: 8px 12px;                                /* 内边距 */
    cursor: pointer;                                   /* 鼠标指针 */
    transition: background-color 0.2s;               /* 背景色过渡 */
}

/* 搜索结果项悬停样式 */
#search-results div:hover {
    background-color: #f0f0f0;                        /* 悬停背景色 */
}

/* 页头副标题右对齐样式 */
.header h4.right-aligned {
    text-align: right;                                 /* 右对齐 */
    margin-right: 20px;                               /* 右外边距 */
}

/* ============================================
   表单区域样式
   ============================================ */
/* 大型表单区域容器样式 - JSON上传、剧本信息、自制角色 */
.jsonUpload,
.metaInfo,
.dirArea {
    width: 95%;                                       /* 相对宽度 */
    max-width: 1200px;                               /* 最大宽度限制 */
    max-height: 400px;                                /* 最大高度，超出滚动 */
    overflow-y: auto;                                  /* 垂直滚动 */
    border: 1px solid var(--border-color);            /* 边框 */
    padding: 20px;                                    /* 内边距 */
    margin: 20px 0;                                   /* 上下外边距 */
    background: var(--card-bg-color);                /* 卡片背景色 */
    border-radius: 8px;                                /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);         /* 阴影效果 */
    transition: transform 0.2s ease;                 /* 悬停动画 */
    box-sizing: border-box;                           /* 盒模型计算 */
    overflow-x: hidden;                                /* 禁止水平滚动 */
}

/* 表单区域悬停效果 */
.jsonUpload:hover,
.metaInfo:hover,
.dirArea:hover {
    transform: translateY(-3px);                        /* 悬停时向上移动 */
}

/* 表单输入组容器 */
#json-upload-area,
#meta-info-group,
#dir-input-group {
    width: 95%;                                       /* 宽度撑满父容器 */
    max-width: 1200px;                               /* 最大宽度 */
    box-sizing: border-box;                           /* 盒模型计算 */
    margin: 0 auto;                                   /* 水平居中 */
    background: var(--card-bg-color);                /* 卡片背景色 */
    padding: 20px;                                    /* 内边距 */
    border-radius: 8px;                                /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);         /* 阴影 */
    margin-top: 10px;                                 /* 上外边距 */
    overflow-x: hidden;                                /* 禁止水平滚动 */
}

/* 表单内部分组容器 */
#json-upload-area div,
#meta-info-group div,
#dir-input-group div {
    width: 95%;                                       /* 分组宽度 */
    max-width: 1200px;                               /* 最大宽度 */
    margin-bottom: 15px;                              /* 下外边距 */
}

/* 表单输入元素统一样式 */
#json-upload-area input,
#meta-info-group input,
#meta-info-group textarea,
#meta-info-group select,
#dir-input-group input,
#dir-input-group textarea,
#dir-input-group select {
    width: 95%;                                       /* 输入框宽度 */
    box-sizing: border-box;                           /* 盒模型计算 */
    padding: 8px;                                     /* 内边距 */
    border: 1px solid var(--border-color);            /* 边框 */
    border-radius: 4px;                                /* 圆角 */
}

/* 文本域最小高度 */
#meta-info-group textarea,
#dir-input-group textarea {
    min-height: 80px;                                 /* 最小高度 */
}


/* ============================================
   状态管理样式
   ============================================ */
/* 状态容器整体布局 */
#state-container {
    display: flex;                                    /* flex布局 */
    flex-direction: column;                            /* 垂直排列 */
    width: 100%;                                      /* 宽度填满 */
}

/* 状态分组容器 */
.state-group {
    margin-bottom: 24px;                              /* 组间大间距 */
    width: 100%;                                      /* 宽度填满 */
}

/* 状态分组标题 - 使用伪元素 */
.state-group::before {
    content: attr(data-group);                        /* 使用data-group属性内容 */
    display: block;                                    /* 块级显示 */
    font-weight: 600;                                 /* 字体加粗 */
    margin: 0 0 12px 0;                              /* 下外边距 */
    color: var(--text-secondary);                    /* 文字颜色（变量未定义） */
    font-size: 0.95em;                                /* 稍小字体 */
    text-transform: uppercase;                         /* 大写转换 */
    letter-spacing: 0.5px;                            /* 字符间距 */
}

/* 状态选项项 */
.state-option {
    display: flex;                                    /* flex布局 */
    align-items: center;                               /* 垂直居中 */
    margin-bottom: 8px;                               /* 组内紧凑间距 */
}

/* 状态复选框样式 */
.state-option input[type="checkbox"] {
    width: 18px;                                      /* 宽度 */
    height: 18px;                                     /* 高度 */
    margin-right: 8px;                                /* 右外边距 */
}

/* 状态标签样式 */
.state-option label {
    padding: 6px 12px;                                /* 内边距 */
    border-radius: 4px;                                /* 圆角 */
    background: var(--bg-card);                      /* 背景（变量未定义） */
    border: 1px solid var(--border-light);            /* 边框（变量未定义） */
}

/* 添加状态按钮尺寸控制 */
.add-state-btn {
    width: auto;                                      /* 自动宽度 */
    min-width: 120px;                                /* 最小宽度 */
    max-width: 180px;                                 /* 最大宽度限制 */
    padding: 8px 16px;                                /* 紧凑内边距 */
}

/* ============================================
   开关组件样式
   ============================================ */
/* 开关容器 */
.toggle-switch {
    position: relative;                                /* 相对定位 */
    display: inline-block;                             /* 行内块元素 */
    width: 60px;                                      /* 宽度 */
    height: 34px;                                     /* 高度 */
    margin-left: 10px;                                /* 左外边距 */
}

/* 隐藏原始复选框 */
.toggle-switch input {
    opacity: 0;                                       /* 完全透明 */
    width: 0;                                         /* 宽度为0 */
    height: 0;                                        /* 高度为0 */
}

/* 开关滑块轨道 */
.slider {
    position: absolute;                                /* 绝对定位 */
    cursor: pointer;                                  /* 鼠标指针 */
    top: 0;                                           /* 顶部对齐 */
    left: 0;                                          /* 左侧对齐 */
    right: 0;                                         /* 右侧对齐 */
    bottom: 0;                                        /* 底部对齐 */
    background-color: #ccc;                            /* 默认背景色 - 灰色 */
    transition: .4s;                                  /* 过渡动画 */
    border-radius: 34px;                               /* 圆角（椭圆形） */
}

/* 开关滑块按钮 */
.slider:before {
    position: absolute;                                /* 绝对定位 */
    content: "";                                      /* 空内容 */
    height: 26px;                                      /* 高度 */
    width: 26px;                                       /* 宽度 */
    left: 4px;                                        /* 左侧偏移 */
    bottom: 4px;                                      /* 底部偏移 */
    background-color: white;                            /* 白色背景 */
    transition: .4s;                                  /* 过渡动画 */
    border-radius: 50%;                                /* 圆形 */
}

/* 开关激活状态 - 轨道 */
input:checked + .slider {
    background-color: #4d0579;                        /* 激活背景色 - 深紫色 */
}

/* 开关激活状态 - 滑块按钮 */
input:checked + .slider:before {
    transform: translateX(26px);                      /* 向右移动26px */
}

/* 开关标签文字样式 */
.toggle-label-off,
.toggle-label-on {
    position: absolute;                                /* 绝对定位 */
    line-height: 34px;                                 /* 行高（与开关高度一致） */
    color: white;                                     /* 白色文字 */
    font-size: 14px;                                  /* 字体大小 */
}

/* 关闭状态标签 */
.toggle-label-off {
    left: 15px;                                      /* 左侧位置 */
    display: block;                                    /* 显示 */
}

/* 开启状态标签 */
.toggle-label-on {
    right: 15px;                                     /* 右侧位置 */
    display: none;                                     /* 隐藏 */
}

/* 开关激活时隐藏关闭标签 */
input:checked ~ .toggle-label-off {
    display: none;                                     /* 隐藏关闭标签 */
}

/* 开关激活时显示开启标签 */
input:checked ~ .toggle-label-on {
    display: block;                                   /* 显示开启标签 */
}

/* ============================================
   拖拽功能样式
   ============================================ */
/* 可拖拽按钮基础样式 */
.draggable-button {
    display: inline-block;                              /* 行内块元素 */
    margin: 2px;                                      /* 外边距 */
    padding: 5px 10px;                                 /* 内边距 */
    background-color: #501468;                        /* 背景色 - 主色调 */
    color: white;                                      /* 文字颜色 */
    border: none;                                      /* 移除边框 */
    border-radius: 4px;                                /* 圆角 */
    cursor: move;                                      /* 移动鼠标指针 */
    user-select: none;                                 /* 禁止选择文本 */
    transition: all 0.3s ease;                       /* 过渡动画 */
}

/* 可拖拽按钮悬停效果 */
.draggable-button:hover {
    background-color: #320744;                        /* 悬停背景色 */
    transform: translateY(-1px);                       /* 轻微上移 */
}

/* ============================================
   Sortable.js 拖拽库样式
   ============================================ */
/* 拖拽占位符样式 - 显示拖拽目标位置 */
.sortable-ghost {
    opacity: 0.4;                                     /* 半透明 */
    background-color: #c3b1d5;                        /* 占位符背景色 */
}

/* 被选中拖拽的元素样式 */
.sortable-chosen {
    background-color: #320744;                        /* 选中背景色 */
    transform: scale(1.02);                           /* 轻微放大 */
}

/* 正在拖拽中的元素样式 */
.sortable-drag {
    opacity: 0.8;                                     /* 拖拽时半透明 */
}

/* ============================================
   行动顺序按钮容器样式
   ============================================ */
/* 首夜和其他夜晚按钮容器 */
.first-night-buttons-container, 
.other-night-buttons-container {
    display: flex;                                    /* flex布局 */
    flex-wrap: wrap;                                  /* 允许换行 */
    gap: 5px;                                         /* 按钮间距 */
    margin: 10px 0;                                   /* 上下外边距 */
    padding: 10px;                                    /* 内边距 */
    background-color: #f8f0e2;                        /* 背景色 - 浅米色 */
    border-radius: 4px;                                /* 圆角 */
    border: 1px solid #d4c1a4;                       /* 边框色 */
    min-height: 50px;                                 /* 最小高度 */
}

/* ============================================
   排序控制按钮样式
   ============================================ */
/* 排序控制容器 */
.sort-controls {
    margin: 10px 0;                                   /* 上下外边距 */
    display: flex;                                    /* flex布局 */
    gap: 10px;                                        /* 按钮间距 */
    flex-wrap: wrap;                                  /* 允许换行 */
}

/* 排序控制按钮样式 */
.sort-controls button {
    padding: 5px 10px;                                 /* 紧凑内边距 */
    font-size: 12px;                                  /* 较小字体 */
    background-color: #6b6b87;                        /* 灰紫色背景 */
    color: white;                                      /* 白色文字 */
    border: none;                                      /* 移除边框 */
    border-radius: 4px;                                /* 圆角 */
    cursor: pointer;                                   /* 鼠标指针 */
    transition: background-color 0.3s ease;           /* 背景色过渡 */
}

/* 排序控制按钮悬停效果 */
.sort-controls button:hover {
    background-color: #5a5a75;                        /* 悬停时变深 */
}