xugu_license/static/license_info/old/license_info.css

       /* 保持样式不变 */
       body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background-color: #f8f8f8;
        margin: 0;
        padding: 0;
        display: flex;
    }
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #1169ff;
color: white;
width: 100%;
margin: 0; /* 移除上下左右的空隙 */
box-sizing: border-box; /* 确保padding不会影响元素的宽度 */
border: 4px solid #1169ff; /* 确保红框颜色填满 */
border-width: 4px 0 4px 0; /* 只显示上下的红框颜色 */
border-radius: 10px; /* 设置圆角 */

}

h1 {
        font-size: 24px;
        font-weight: 600;
        margin: 0;
    }

.CaptureLicenseOnce-button {
background-color: white;
color: #007aff;
border: 2px solid #007aff;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
box-shadow: none;
transition: background-color 0.3s, color 0.3s;
float: right; /* 将按钮移动到左侧 */
}

.CaptureLicenseOnce-button:hover {
background-color: #0eb3ff;
color: white;
}
    
  
/* 扁平风格的选择框 */
.flat-select {
background-color: transparent; /* 背景色透明 */
border: 1px solid #007aff; /* 边框颜色与按钮一致 */
border-radius: 15px; /* 圆角边框 */
padding: 5px 10px; /* 内边距 */
font-size: 16px; /* 字体大小 */
color: #007aff; /* 文字颜色 */
outline: none; /* 移除默认的焦点样式 */
appearance: none; /* 移除默认的下拉箭头样式 */
-webkit-appearance: none; /* 对部分浏览器的兼容性处理 */
-moz-appearance: none; /* 对部分浏览器的兼容性处理 */
cursor: pointer; /* 鼠标指针样式 */
margin-left: 10px; /* 添加左边距，使选择框与前面的元素有些距离 */
box-shadow: none; /* 移除阴影效果 */
transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

/* 选择框在悬停时的效果 */
.flat-select:hover {
background-color: #007aff; /* 背景色变为蓝色 */
color: white; /* 文字颜色变为白色 */
}

/* 选择框在聚焦时的效果 */
.flat-select:focus {
background-color: #e0f7ff; /* 聚焦时的背景颜色 */
border-color: #0056b3; /* 聚焦时的边框颜色 */
}

/* 添加下拉箭头的样式 */
.flat-select::after {
content: '▼'; /* 使用字符作为下拉箭头 */
position: absolute;
right: 10px;
pointer-events: none; /* 确保下拉箭头不会遮挡选择框 */
}


/* 扁平圆角风格的按钮样式 */
.flat-rounded-button {
background-color: white;
color: #007aff;
border: 2px solid #007aff;
padding: 10px 20px;
border-radius: 15px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
box-shadow: none; /* 移除阴影效果 */
transition: background-color 0.3s, color 0.3s;
margin: 5px; /* 添加按钮之间的间距 */
}

/* 悬停时的效果 */
.flat-rounded-button:hover {
background-color: #0eb3ff;
color: white;
}

/*lic 展示页 主行展开后变化*/
.expanded-row {
background-color: #0eb3ff; /* 展开时的背景颜色 */
border-color: #04aa9c; /* 展开时的边框颜色 */
border-width: 4px; /* 边框宽度 */
border-radius: 35px; /* 边框圆角 */
transition: all 0.2s ease; /* 添加过渡效果 */
}

/*苹果风格模态框*/
.apple-modal-content {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
padding: 20px;
border-radius: 12px;
background-color: white;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
min-width: 250px; /* 添加最小宽度 */
}

.apple-modal-title {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}

.apple-modal-subtitle {
font-size: 20px;
font-weight: 500;
color: #555;
margin-top: 20px;
margin-bottom: 10px;
}
/* 苹果风格的文字样式 */
.apple-modal-text {
font-size: 16px;
color: #555;
line-height: 1.6;
margin-bottom: 10px;

}

/* 强调部分 */
.apple-modal-text strong {
color: #333;
}

/* 苹果风格的模态框关闭按钮 */

.apple-close {
color: #aaa;
font-size: 24px; /* 调整字体大小 */
font-weight: bold;
cursor: pointer;
transition: color 0.3s;
}

.apple-close:hover {
color: black;
}

/* 苹果风格的退出按钮 */
.apple-logout-button {
background-color: #007aff; /* 苹果风格的蓝色 */
color: white;
border: none;
padding: 8px 16px; /* 减小内边距，使按钮更小 */
border-radius: 10px; /* 圆角稍微减小 */
font-size: 14px; /* 调整字体大小 */
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}

.apple-logout-button:hover {
background-color: #005bb5; /* 悬停时按钮颜色变深 */
transform: scale(1.05); /* 悬停时按钮略微放大 */
}

.apple-logout-button:active {
background-color: #003e7e; /* 点击时按钮颜色更深 */
transform: scale(0.98); /* 点击时按钮略微缩小 */
}


.upload-button, .user-button {
        background-color: white;
        color: #007aff;
        border: none;
        padding: 10px 20px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s;
    }
.upload-button:hover, .user-button:hover {
        background-color: #f0f0f0;
    }
    .sidebar {
        width: 200px;
        background-color: #f1f1f1;
        padding: 20px;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        height: 100vh;
        transition: transform 0.3s ease;
    }
    .sidebar.hidden {
        transform: translateX(-100%);
    }
    .sidebar button {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        background-color: white;
        color: #007aff;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: background-color 0.3s;
    }
    .sidebar button:hover {
        background-color: #e0e0e0;
    }
    .content {
        flex-grow: 1;
        padding: 20px;
        transition: margin-left 0.3s ease;
    }
    .content.expanded {
        margin-left: -200px;
    }
    .toggle-sidebar {
position: fixed;
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 调整为居中对齐 */
left: 0; /* 靠左对齐 */
background-color: #007aff;
color: white;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 0 10px 10px 0; /* 右侧圆角，左侧保持平直 */
width: 30px; /* 长条形箭头的宽度 */
height: 60px; /* 长条形箭头的高度 */
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease; /* 添加动效 */
}

.sidebar.hidden + .content .toggle-sidebar {
        left: 0;
        transform: translateX(0) translateY(-50%);
    }


/* 按钮容器的样式 */
.button-container {
display: inline-flex; /* 确保按钮在同一行 */
align-items: center; /* 垂直居中对齐 */
gap: 10px; /* 设置按钮之间的间距为10px，可以根据需要调整 */
}

/* 统一按钮的样式 */



/* 通用按钮样式 */
.license-status-btn {
display: inline-block;
padding: 5px 15px;
font-size: 14px;
font-weight: bold;
color: white;
text-align: center;
border-radius: 15px; /* 圆角样式 */
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
transition: background-color 0.3s;
border: none; /* 移除按钮边框 */
}

/* 查看详情按钮的特定样式 */
.license-status-btn.view-details {
background-color: #add8e6; /* 浅蓝色背景 */
color: white;
}

/* 下载lic按钮的特定样式 */
.license-status-btn.download-lic {
background-color: #4CAF50; /* 绿色背景 */
color: white;
}



/* 分发按钮样式 */
.license-status-btn.distribute {
background-color: #007bff; /* 蓝色背景 */
}

.license-status-btn.distribute:hover {
background-color: #0056b3; /* 悬停时的颜色 */
}

/* 生成按钮样式 */
.license-status-btn.generate {
background-color: #ffc107; /* 黄色背景 */
}

.license-status-btn.generate:hover {
background-color: #e0a800; /* 悬停时的颜色 */
}

/* 默认状态下的箭头图标 */
.arrow-icon {
width: 10px;
height: 10px;
border: solid #007aff;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg); /* 初始方向向下 */
transition: transform 0.3s ease; /* 添加旋转过渡效果 */
cursor: pointer;
}

/* 当行展开时旋转箭头图标 */
.rotate-arrow {
transform: rotate(-135deg); /* 旋转方向向上 */
}



/*分发历史样式*/
#distributionHistoryModal .centered-modal-content {
background-color: #ffffff;
border: none;
border-radius: 15px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 30%;  /* 设置宽度为屏幕的80% */
max-width: 90%;  /* 最大宽度设置为90%屏幕宽度 */
height: auto;  /* 高度自适应内容 */
max-height: 80vh;  /* 设置最大高度为屏幕的80% */
overflow-y: auto;  /* 如果内容超出则添加垂直滚动条 */
overflow-x: hidden;  /* 水平不出现滚动条 */
margin: 0 auto;  /* 居中显示 */
}

/* 设置用户和邮箱分发记录容器样式 */
.distribution-container {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #f9f9f9;
    margin-bottom: 20px;
}

/* 每条记录样式 */
.distribution-item {
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

/* 最后一条记录不需要底部边框 */
.distribution-item:last-child {
    border-bottom: none;
}



/* lic查看详细按钮样式 */
.license-status-btn.view-details {
background-color: #add8e6; /* 浅蓝色背景 */
color: white; /* 白色文字 */
border: none; /* 移除按钮边框 */
padding: 8px 16px; /* 调整内边距，与“生成”按钮保持一致 */
border-radius: 20px; /* 调整圆角，确保形状一致 */
cursor: pointer;
font-size: 14px; /* 调整字体大小，确保一致 */
font-weight: 500; /* 字体权重，确保一致 */
margin-left: 10px; /* 与其他按钮的间隔 */
transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

.license-status-btn.view-details:hover {
background-color: #87ceeb; /* 悬停时颜色变深 */
}




/* 表格样式 */
/* 表格容器 */
/* 表格容器 */

table {
width: 100%;
border-collapse: separate;
border-spacing: 0 6px; /* 设置行间距为4px */
/*  background-color: transparent; 使表格背景透明，突出行间距效果 */
margin: 20px 0;

}

th, td {
padding: 20px 20px 15px 20px; /* 设置单元格内边距 */
text-align: left;
font-size: 16px;
/*   background-color: white; 单元格背景色 */

}
th {
    background-color: #f8f8f8; /* 表头背景色 */
    font-weight: bold;
    color: #333;
    border-color: #1169ff;
    text-align: center; /* 水平居中 */
    vertical-align: middle; /* 垂直居中 */
    }

    /* 加粗表头的第一个字段 */
th:first-child {
    font-weight: bold;
}

td {
    text-align: center; /* 水平居中 */
    vertical-align: middle; /* 垂直居中 */
    border-bottom: 3px solid #e7e7e7; /* 设置底部边框线颜色为灰色 */
    color: #555;
    }

/* 鼠标悬停时改变边框颜色 */
tr:hover {
background-color: #e3e5e7; /* 设置悬停时的背景颜色 */
border-color: #1169ff; /* 设置悬停时的边框颜色 */
border-width: 4px; /* 设置悬停时的边框大小 */
border-radius: 15px; /* 设置悬停时的圆角 */
}


/* 表格行样式 */
tr {

background-color: rgb(255, 253, 253); /* 每行背景色 */
box-shadow: 0 7px 10px rgba(1, 1, 1, 0.5); /* 设置阴影效果 */
border-radius: 10px; /* 设置每行的圆角 */
overflow: hidden; /* 确保圆角效果生效 */
border: 2px solid transparent; /* 默认边框为透明 */
transition: all 0.3s ease; /* 添加过渡效果 */

}
/* 将每行第一个字段的值加粗 */
td:first-child {
    font-weight: bold; /* 设置字体加粗 */
}

/* 确保单元格也适应行的圆角 */
tr:first-child td:first-child {
border-top-left-radius: 10px;

}
tr:first-child td:last-child {
border-top-right-radius: 10px;
}
tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}





/*添加用户样式*/
.flat-rounded-input {
width: calc(100% - 40px); /* 与其他输入框一致的宽度 */
padding: 15px 20px;  /* 更大的内边距 */
font-size: 18px;  /* 更大的字体 */
border: 2px solid #e0e0e0;  /* 边框颜色 */
border-radius: 25px;  /* 圆角边框 */
box-sizing: border-box;
margin-bottom: 20px;
background-color: #f8f8f8;  /* 背景色 */
transition: border-color 0.3s, box-shadow 0.3s;  /* 添加动画效果 */
}

.flat-rounded-input:focus {
border-color: #007aff;  /* 聚焦时的边框颜色 */
box-shadow: 0 0 8px rgba(0, 122, 255, 0.2);  /* 聚焦时的阴影效果 */
outline: none;  /* 去掉默认的聚焦样式 */
}

.flat-rounded-button {
background-color: #007aff;
color: white;
border: none;
padding: 15px 20px;
border-radius: 25px;
cursor: pointer;
font-size: 18px;
font-weight: bold;
box-shadow: none; /* 移除阴影效果 */
transition: background-color 0.3s, color 0.3s;
}

.flat-rounded-button:hover {
background-color: #005bb5;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 15px;
}

.form-group label {
flex: 0 0 80px; /* 固定标签宽度 */
text-align: right;
margin-right: 10px; /* 标签与输入框之间的间距 */
}

.form-group input {
flex: 1; /* 输入框占据剩余空间 */
}



/* 分页按钮样式 */
.pagination button {
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
border: none;
border-radius: 15px;
background-color: #007aff;
color: white;
font-size: 16px;
font-weight: 500;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s;
}

.pagination button:disabled {
background-color: #b0c4de;
cursor: not-allowed;
}

.pagination button:not(:disabled):hover {
background-color: #005bb5;
}




    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }
.modal-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fefefe;
        padding: 20px;
        border: 1px solid #888;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        max-width: 100%;
        max-height: 90%;
       
        overflow-y: auto;
    }


/*修改license信息的样式*/
.modify-license-modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fefefe;
padding: 50px;
border: 1px solid #888;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 400px;
height: 80%; /* 设置为你希望的高度 */
overflow-y: auto;
text-align: center;
}

.modify-license-modal-content input[type="number"],
.modify-license-modal-content input[type="date"],
.modify-license-modal-content input[type="text"],
.modify-license-modal-content input[type="email"],
.modify-license-modal-content input[type="password"],
.modify-license-modal-content textarea,
.modify-license-modal-content select {
width: calc(100% - 40px);
padding: 15px 20px;  /* 更大内边距 */
font-size: 18px;  /* 更大字体 */
border: 2px solid #e0e0e0;  /* 边框颜色 */
border-radius: 25px;  /* 圆形边框 */
box-sizing: border-box;
margin-bottom: 20px;
background-color: #f8f8f8;  /* 背景色更浅 */
transition: border-color 0.3s, box-shadow 0.3s;  /* 添加动画效果 */
}

.modify-license-modal-content input[type="number"]:focus,
.modify-license-modal-content input[type="date"]:focus,
.modify-license-modal-content input[type="text"]:focus,
.modify-license-modal-content input[type="email"]:focus,
.modify-license-modal-content input[type="password"]:focus,
.modify-license-modal-content textarea:focus,
.modify-license-modal-content select:focus {
border-color: #007aff;  /* 聚焦时的边框颜色 */
box-shadow: 0 0 8px rgba(0, 122, 255, 0.2);  /* 聚焦时的阴影效果 */
outline: none;  /* 去掉默认的聚焦样式 */
}

.modify-license-modal-content button {
width: 100%;
padding: 15px 20px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #007aff;
border: none;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s;
}

.modify-license-modal-content button:hover {
background-color: #005bb5;  /* 鼠标悬停时的颜色变化 */
}

.modify-license-modal-content .close {
color: #aaa;
float: right;
font-size: 30px;
font-weight: bold;
}

.modify-license-modal-content .close:hover,
.modify-license-modal-content .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.modify-license-modal-content .extra-info {
padding: 20px;
background-color: white;
border: 1px solid #ddd;
border-radius: 10px;
margin-top: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
line-height: 1.5; /* 增加行高，保证字段间距 */
}



.modal-content input[type="number"] {
width: calc(100% - 40px);
padding: 15px 20px;  /* 与其他输入框的内边距一致 */
font-size: 18px;  /* 与其他输入框的字体大小一致 */
border: 2px solid #e0e0e0;  /* 与其他输入框的边框颜色一致 */
border-radius: 25px;  /* 与其他输入框的圆角一致 */
box-sizing: border-box;
margin-bottom: 20px;
background-color: #f8f8f8;  /* 与其他输入框的背景色一致 */
transition: border-color 0.3s, box-shadow 0.3s;  /* 与其他输入框的过渡效果一致 */
}

.modal-content input[type="number"]:focus {
border-color: #007aff;  /* 与其他输入框获得焦点时的边框颜色一致 */
box-shadow: 0 0 8px rgba(0, 122, 255, 0.2);  /* 与其他输入框获得焦点时的阴影效果一致 */
outline: none;  /* 移除默认的焦点轮廓 */
}


.modal-content input[type="date"] {
width: calc(100% - 40px);
padding: 15px 20px;  /* 与其他输入框的内边距一致 */
font-size: 18px;  /* 与其他输入框的字体大小一致 */
border: 2px solid #e0e0e0;  /* 与其他输入框的边框颜色一致 */
border-radius: 25px;  /* 与其他输入框的圆角一致 */
box-sizing: border-box;
margin-bottom: 20px;
background-color: #f8f8f8;  /* 与其他输入框的背景色一致 */
transition: border-color 0.3s, box-shadow 0.3s;  /* 与其他输入框的过渡效果一致 */
}

.modal-content input[type="date"]:focus {
border-color: #007aff;  /* 与其他输入框获得焦点时的边框颜色一致 */
box-shadow: 0 0 8px rgba(0, 122, 255, 0.2);  /* 与其他输入框获得焦点时的阴影效果一致 */
outline: none;  /* 移除默认的焦点轮廓 */
}


    /* 输入框样式 */
.modal-content input[type="text"],
.modal-content input[type="email"],
.modal-content input[type="password"],
.modal-content textarea,
.modal-content select {
width: calc(100% - 40px);
padding: 15px 20px;  /* 更大内边距 */
font-size: 18px;  /* 更大字体 */
border: 2px solid #e0e0e0;  /* 边框颜色 */
border-radius: 25px;  /* 圆形边框 */
box-sizing: border-box;
margin-bottom: 20px;
background-color: #f8f8f8;  /* 背景色更浅 */
transition: border-color 0.3s, box-shadow 0.3s;  /* 添加动画效果 */
}

/* 输入框聚焦时的样式 */
.modal-content input[type="text"]:focus,
.modal-content input[type="email"]:focus,
.modal-content input[type="password"]:focus,
.modal-content textarea:focus,
.modal-content select:focus {
border-color: #007aff;  /* 聚焦时的边框颜色 */
box-shadow: 0 0 8px rgba(0, 122, 255, 0.2);  /* 聚焦时的阴影效果 */
outline: none;  /* 去掉默认的聚焦样式 */
}



/* 按钮样式 */
.modal-content button {
width: 100%;
padding: 15px 20px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #007aff;
border: none;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s;
}

.modal-content button:hover {
background-color: #005bb5;  /* 鼠标悬停时的颜色变化 */
}

    .close {
        color: #aaa;
        float: right;
        font-size: 30px;
        font-weight: bold;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
    .close:hover {
color: #000; /* 悬停时颜色变为黑色 */
transform: scale(1.1); /* 悬停时稍微放大 */
}

    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    .extra-info {
padding: 2px;
background-color: white;
border: 1px solid #ddd;
border-radius: 10px;
margin-top: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
line-height: 1.5; /* 增加行高，保证字段间距 */
}
.extra-info p {
margin: 2px 0; /* 每个字段的间距 */
word-wrap: break-word; /* 允许在单词内断行 */
word-break: break-all; /* 允许在任何字符处断行 */
white-space: pre-wrap; /* 保持空格和换行符 */
border-bottom: 1px solid #f0f0f0; /* 每个字段下方加上细线 */
padding-bottom: 2px; /* 加大下方内边距 */
}

/* 修改运维邮箱和销售邮箱的勾选框样式 */
#emailInputs {
display: flex;
flex-direction: column; /* 确保每一行都垂直排列 */
gap: 10px; /* 增加每行之间的间距 */
}

#emailInputs div {
display: flex;
align-items: center; /* 垂直居中 */
}

#emailInputs input[type="checkbox"] {
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: #007aff;
width: 1.15em;
height: 1.15em;
border: 0.15em solid #007aff;
border-radius: 0.15em;
transform: translateY(-0.075em);
display: grid;
place-content: center;
}

#emailInputs input[type="checkbox"]::before {
content: "";
width: 0.65em;
height: 0.65em;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 22%, 80% 0%, 43% 62%);
transform: scale(0);
transform-origin: bottom left;
transition: transform 0.15s ease-in-out;
box-shadow: inset 1em 1em #007aff;
/* 使用淡蓝色与主题颜色匹配 */
background-color: CanvasText;
}

#emailInputs input[type="checkbox"]:checked::before {
transform: scale(1);
}


    .user-info {
        position: absolute;
        width: 300px;
        background-color: white;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: none;
    }
    .user-info .close {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #aaa;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
    }
    .user-info .close:hover,
    .user-info .close:focus {
        color: black;
        text-decoration: none;
    }
    .centered-modal-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fefefe;
        padding: 50px;
        border: 1px solid #888;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        width: 400px;
        height: 400px;
        overflow-y: auto;
        text-align: center;
    }
    .ios-button {
        width: 100%;
        padding: 10px;
        margin: 0;
        border: none;
        border-radius: 0;
        font-size: 16px;
        font-weight: 600;
        color: #007aff;
        background-color: transparent;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .ios-button:active {
        background-color: rgba(0, 122, 255, 0.1);
    }
    .email-modal-label {
        font-size: 18px;
        margin-bottom: 10px;
        display: block;
    }
    .email-modal-input {
        width: calc(100% - 20px);
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 10px;
    }
    .email-modal .modal-content {
width: 90%; /* 修改宽度 */
max-width: 600px; /* 最大宽度 */
height: auto; /* 自适应高度 */
max-height: 80%; /* 最大高度，防止内容溢出屏幕 */
overflow-y: auto; /* 添加垂直滚动条，如果内容超出 */
}


    .add-email-button {
        display: block;
        width: 100%;
        padding: 10px 20px;
        margin-bottom: 10px;
        background-color: #007aff;
        color: white;
        border: none;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s;
    }
    .add-email-button:hover {
        background-color: #005bb5;
    }
    .action-modal-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .action-modal-content button {
        width: auto;
        padding: 10px 20px;
        margin: 5px 0;
        background-color: white;
        color: black;
        border: none;
        text-align: left;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s;
    }
    .action-modal-content button:hover {
        background-color: #f0f0f0;
    }
    .sort-button {
        background-color: transparent;
        border: none;
        color: #007aff;
        font-size: 16px;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 15px;
        transition: background-color 0.3s;
    }
    .sort-button:hover {
        background-color: rgba(0, 122, 255, 0.1);
    }
    #confirmGenerateModal .centered-modal-content {
        background-color: #ffffff;
        border: none;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    #confirmGenerateModal .centered-modal-content button {
        background-color: #007aff;
        color: white;
        border: none;
        border-radius: 10px;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 16px;
        margin: 10px;
        transition: all 0.3s;
    }
    #confirmGenerateModal .centered-modal-content button:hover {
        background-color: #005bb5;
        border: 1px solid #007aff;
    }

    #role-management {
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 角色项的默认样式 */
.role-item {
background-color: white; /* 默认背景色 */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
border-radius: 10px; /* 圆角效果 */
overflow: hidden; /* 确保圆角效果生效 */
border: 2px solid transparent; /* 默认边框为透明 */
transition: all 0.3s ease; /* 过渡效果 */
margin-bottom: 20px; /* 每个角色之间的间距 */
padding: 10px; /* 内边距 */
}

/* 置顶角色的样式 */
.role-item.top-role {
background-color: #d3d3d3; /* 灰色背景 */
}

/* 鼠标悬停时的样式 */
.role-item:hover {
background-color: #e6f7ff; /* 悬停时背景色 */
border-color: #1169ff; /* 悬停时边框颜色 */
border-width: 4px; /* 悬停时边框大小 */
border-radius: 15px; /* 悬停时的圆角 */
}

/* 置顶角色在悬停时的样式 */
.role-item.top-role:hover {
background-color: #d3d3d3; /* 保持灰色背景不变 */
border-color: #1169ff; /* 悬停时边框颜色 */
border-width: 4px; /* 悬停时边框大小 */
border-radius: 15px; /* 悬停时的圆角 */
}


.role-item h3 {
margin-top: 0;
}

.role-item ul {
padding-left: 20px;
}

.create-role-button {
background-color: #007aff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s;
margin-left: 20px; /* 与标题之间的间距 */
}
.create-role-button:hover {
background-color: #005bb5;
}