/* 设置页面的基本样式 */
:root {
    --base-font-size: 16px; /* 定义基本字体大小，用于整个页面的字体大小基准 */
    --scrollbar-width: 5px; /* 定义滚动条宽度 */
    --scrollbar-track: #99C4CF; /* 滚动条轨道颜色 */
    --scrollbar-thumb: #888; /* 滚动条滑块颜色 */
    --scrollbar-thumb-hover: #555; /* 滚动条滑块悬停颜色 */
}

body {
    height: 100vh; /* 设置页面高度为视口高度 */
    width: 100vw; /* 设置页面宽度为视口宽度 */
    margin: 0; /* 移除默认的body边距 */
    margin-top: 0x;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 优化中文字体显示 */
    background-color: #f5f5f5; /* 设置页面背景颜色为浅灰色 */
    color: #333; /* 设置默认文字颜色为深灰色 */
    min-height: 100vh; /* 确保页面最小高度为视口高度 */
    display: flex; /* 使用flex布局 */
    word-wrap: break-word; /* 允许长单词换行 */
    font-size: var(--base-font-size); /* 使用CSS变量设置基础字体大小 */
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    flex-direction: row;
    -webkit-font-smoothing: antialiased; /* WebKit字体平滑 */
    -moz-osx-font-smoothing: grayscale; /* Firefox字体平滑 */
    text-rendering: optimizeLegibility; /* 优化文字可读性 */
}

/* 美化滚动条样式 */
/* Webkit浏览器滚动条样式 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: var(--scrollbar-width); /* 垂直滚动条宽度 */
    height:var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track); /* 滚动条轨道背景色 */
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb); /* 滚动条滑块颜色 */
    border-radius: 3px; /* 滑块圆角 */
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover); /* 滚动条滑块悬停颜色 */
}

/* 侧边栏样式 */
.out-sidebar {
    height: 100vh; /* 侧边栏高度为视口高度 */
    width: 200px; /* 侧边栏宽度为200px */
    min-height: 100vh; /* 确保侧边栏最小高度为视口高度 */
    padding: 0px; /* 设置内边距为1.25em，使用em单位以适应字体大小变化 */
    background-color: #325969; /* 设置侧边栏背景颜色为浅蓝色 */
    box-shadow: 0px 0 0px rgba(0, 0, 0, 0); /* 添加右侧阴影效果 */
    position: relative; /* 设置相对定位 */
    overflow-y: auto;
}


/* 侧边栏链接样式 */
.out-sidebar a {
    display: flex; /* 使用flex布局来帮助内容居中 */
    margin-bottom: 0px; /* 不设置底部外边距 */
    font-size: calc(var(--base-font-size) * 1); /* 计算字体大小 */
    color: black; /* 设置链接文字颜色 */
    background-color: #6C8FA9; /* 半透明白色背景 */
    padding: 25px; /* 不设置内边距 */
    border-radius: 0px; /* 不设圆角 */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0); /* 添加阴影效果 */
    transition: all 0.3s ease;
     /* font-weight: bold; 文字加粗 */
    line-height: 1.5; /* 行高 */
    text-decoration: none; /* 移除下划线 */
    text-align: center;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    border-bottom: 1px solid black; /* 黑色边框 */
    border-right: 1px solid black; /* 黑色边框 */
}
/* 侧边栏链接悬停样式 */
.out-sidebar a:hover {
    color: #007bff; /* 鼠标悬停时改变文字颜色为蓝色 */
    transform: scale(1.0); /* 鼠标悬停时放大链接 */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0); /* 鼠标悬停时改变阴影效果 */
    background-color: #99C4CF; /* 鼠标悬停时改变背景颜色为不透明白色 */
    border-right: 0px
}


/* 内容区域样式 */
.out-content {
    flex: 1; /* 允许内容区域扩展以填充剩余空间 */
    padding: 0px 30px; /* 设置内边距为1.25em */
    background-color: #99C4CF; /* 设置背景颜色为白色 */
    word-wrap: break-word; /* 允许长单词换行 */
    min-height: 100vh; /* 确保最小高度为视口高度 */
    overflow:auto;

}
/* 窄屏样式 - 当窗口宽度小于768px时应用 */
@media (max-width: 768px) {
    body {
        flex-direction:  column; /* 改为竖向排列 */
        overflow: auto; /* 允许滚动 */
    }

    .out-sidebar {
        width: 100%; /* 侧边栏宽度填满 */
        height: auto; /* 高度自动 */
        min-height: auto; /* 最小高度自动 */
        max-height: 100px;
        display: flex; /* 使用flex布局 */
        flex-direction: row; /* 横向排列链接 */
        overflow: auto;
        flex-wrap: nowrap;
        flex: 1 1 auto;
    }

    .out-sidebar a {
        flex: 1; /* 链接项自动扩展 */
        min-width: auto; /* 最小宽度 */
        padding:10px;
        margin-bottom: 0;
        border-right: 1px solid black;
        border-bottom: 2px solid black;
    }
    /* 侧边栏链接悬停样式 */
    .out-sidebar a:hover {
        color: #007bff; /* 鼠标悬停时改变文字颜色为蓝色 */
        transform: scale(1.0); /* 鼠标悬停时放大链接 */
        box-shadow: 0 0px 0px rgba(0, 0, 0, 0); /* 鼠标悬停时改变阴影效果 */
        background-color: #99C4CF; /* 鼠标悬停时改变背景颜色为不透明白色 */
        border-bottom: 0px;
        border-right:1px solid black;
    }

    .out-content {
        min-height: auto; /* 内容区域高度自动 */
    }
}

/* 表格样式 */
.out-content table {
    width: auto;
    border-collapse: collapse; /* 合并表格边框 */
    padding-bottom: 20px; /* 根据需要调整值 */
    table-layout:fixed;
    margin:20 0;
}

th, td {
    max-width: 200px; /* 设置最大宽度为视口宽度减去200px */
    border: 1px solid #000000; /* 设置单元格边框为1px实线灰色 */
    text-align: center; /* 设置单元格内容居中对齐 */
    padding: 5px 5px; /* 设置单元格上下内边距为20px */
    word-wrap:break-word;

}

table thead tr {
    background-color: #325969; /* 设置表头背景颜色为深青色 */
    color: rgba(255, 255, 255, 1);
}

table tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0); /* 设置奇数行背景颜色为浅灰色 */
}

table tfoot tr td {
    text-align: right; /* 设置表格底部单元格内容右对齐 */
    padding-right: 20px; /* 设置表格底部单元格右内边距为20px */
}

/* 按钮样式 */
button{
    display: inline-flex; /* 将按钮显示为内联块级元素 */
    border-radius: 4px; /* 设置按钮圆角 */
    background-color: #004dff; /* 设置按钮背景颜色为蓝色 */
    border: none; /* 移除按钮边框 */
    color: #FFFFFF; /* 设置按钮文字颜色为白色 */
    text-align: center; /* 设置按钮文字居中对齐 */
    font-size: calc(var(--base-font-size) * 0.7); /* 设置按钮字体大小 */
    padding: 3px 8px; /* 设置按钮内边距 */
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer; /* 设置鼠标指针为手型 */
    margin: 5px 2px; /* 设置按钮外边距 */
    position: relative; /* 设置相对定位 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

button span {
    cursor: pointer; /* 设置鼠标指针为手型 */
    display: inline-block; /* 将内容显示为内联块级元素 */
    position: relative; /* 设置相对定位 */
    transition: all 0.3s ease;
    top: 0;
    font-size: inherit;
}

button span:after {
    content: '  »'; /* 添加伪元素内容 */
    position: absolute; /* 设置绝对定位 */
    opacity: 0; /* 设置伪元素初始透明度为0 */
    top: 50%; /* 将伪元素垂直居中 */
    right: 0px; /* 将伪元素放置在右侧 */
    transform: translateY(-50%); /* 调整伪元素位置以实现垂直居中 */
    transition: all 0.3s ease;
}

button:hover {
    transform: scale(1.1); /* 鼠标悬停时放大按钮 */
}

button:hover span {
    padding-right: calc(var(--base-font-size) * 1.2); /* 鼠标悬停时调整内容右内边距 */
}

button:hover span:after {
    opacity: 1; /* 鼠标悬停时显示伪元素 */
    right: 2px; /* 鼠标悬停时调整伪元素位置 */
}

button:active {
    display: inline-block;
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateX(0);
    box-shadow: 0px 0px 0px 0px #a29bfe; /* 按下按钮时移除阴影效果 */
}

ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

li {
    display: flex; /* 将按钮显示为内联块级元素 */
    margin-top: 15px; /* 添加顶部间距，避免紧靠顶部 */
    position: relative; /* 设置相对定位 */
    align-items: center; /* 垂直居中 */
    justify-content: left; /* 水平居中 */
    gap: 0px 2px;
}

/* 设置所有链接的基本样式 */
.out-content a {
    display: inline; /* 必须使用inline或inline-block */
    color: #333;
    text-decoration: none;
    padding: 0;
    position: relative;
    margin: 5px calc(var(--base-font-size) * 0.5);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: all 0.3s ease;
    /* 确保文字背景不会遮挡下划线 */
    background: transparent;
    display: inline !important;
    text-decoration: none;
    background-image: linear-gradient(transparent calc(100% - 0.3em),
                                     rgba(0, 191, 255, 0.5) 0.3em);
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

/* 鼠标悬停时的样式 */
.out-content a:hover {
    color: #007bff;
}

/* 添加线条 */
.out-content a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0; /* 使用right而不是width */
    bottom: -0.2em; /* 调整到文字下方 */
    height: calc(var(--base-font-size) * 0.3);
    background-color: rgba(0, 191, 255, 0.5);

    /* 关键属性：使下划线跟随文字换行 */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;

    /* 确保下划线在文字下方 */
    z-index: -1;
}