/* 全局样式设置，包括盒模型和基础字体 */
* {
    box-sizing: border-box; /* 统一使用 border-box 盒模型 */
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif; /* 使用现代无衬线字体 */
    background: linear-gradient(135deg, #1E3A8A 70%, #374151 30%); /* 主色调渐变背景 */
    color: #FFFFFF; /* 文字颜色为白色，确保对比度 */
    line-height: 1.6; /* 行高提高可读性 */
    padding-top: 80px; /* 为固定导航栏预留空间 */
    overflow-x: hidden; /* 禁止水平滚动条 */
}

/* 固定导航栏样式 */
.navbar {
    position: fixed; /* 固定在顶部 */
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(30, 58, 138, 0.9); /* 半透明背景色 */
    display: flex;
    justify-content: space-between; /* 内容两端对齐 */
    align-items: center;
    padding: 15px 30px; /* 内边距 */
    z-index: 1000; /* 确保在最上层 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果增强立体感 */
    transition: background-color 0.3s ease; /* 背景色过渡效果 */
}

.navbar a {
    color: #FFFFFF; /* 链接颜色为白色 */
    margin: 0 15px; /* 链接间距 */
    text-decoration: none; /* 去掉下划线 */
    font-weight: bold; /* 加粗字体 */
    transition: color 0.3s ease; /* 颜色过渡效果 */
}

.navbar a:hover {
    color: #F97316; /* 悬停时颜色变化 */
}

/* 主内容区域样式 */
.container {
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 居中对齐 */
    padding: 20px; /* 内边距 */
    display: grid;
    grid-template-columns: 1fr; /* 单列布局 */
    gap: 20px; /* 元素间距 */
}

/* 文章标题样式 */
article h2 {
    font-size: 2em; /* 标题字号 */
    color: #FFFFFF; /* 标题颜色 */
    margin-bottom: 15px; /* 下边距 */
    border-bottom: 2px solid #F97316; /* 标题下方橙色线条 */
    padding-bottom: 10px; /* 标题下方内边距 */
}

/* 文章段落样式 */
article p {
    font-size: 1.1em; /* 正文字号 */
    color: #E5E7EB; /* 浅灰色文字 */
    margin-bottom: 15px; /* 段落下边距 */
    line-height: 1.8; /* 行高 */
}

/* 强调文字样式 */
article p span {
    color: #1E3A8A; /* 深蓝色高亮 */
    font-weight: bold; /* 加粗 */
}

/* 代码块样式，与正文区别开 */
article pre {
    background: #374151; /* 深灰色背景 */
    padding: 15px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    overflow-x: auto; /* 横向滚动 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    margin-bottom: 20px; /* 下边距 */
}

article code {
    color: #10B981; /* 绿色代码文字 */
    font-family: 'Courier New', Courier, monospace; /* 等宽字体 */
    font-size: 1em; /* 字号 */
}

/* 突出显示代码关键词 */
article code .keyword {
    color: #F97316; /* 橙色 */
    font-weight: bold; /* 加粗 */
}

/* 图片装饰样式 */
.decorative-image {
    max-width: 650px; /* 最大宽度 */
    width: 100%; /* 流式宽度 */
    border-radius: 15px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
    margin: 20px auto; /* 上下外边距，居中对齐 */
    display: block; /* 块级元素 */
}

.decorative-image:hover {
    transform: scale(1.05); /* 悬停时微放大 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 增强阴影 */
}

/* 提示信息样式 */
.reference-note {
    background: rgba(249, 115, 22, 0.1); /* 橙色背景 */
    border-left: 5px solid #F97316; /* 左边框 */
    padding: 15px 20px; /* 内边距 */
    margin-bottom: 30px; /* 下边距 */
    font-size: 1.2em; /* 字号 */
    color: #F97316; /* 橙色文字 */
}

/* 响应式设计：适配不同屏幕尺寸 */
@media (min-width: 768px) {
    .container {
        grid-template-columns: 3fr 1fr; /* 双栏布局 */
    }

    .sidebar {
        position: sticky; /* 固定位置 */
        top: 80px; /* 顶部位置 */
    }
}

@media (max-width: 767px) {
    .navbar {
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start; /* 左对齐 */
    }

    .navbar a {
        margin: 10px 0; /* 链接上下间距 */
    }

    .decorative-image {
        max-width: 100%; /* 全宽 */
    }
}

/* 动画效果：卡片悬停动画 */
.card {
    background: #FFFFFF; /* 卡片背景色 */
    color: #374151; /* 文字颜色 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
    padding: 20px; /* 内边距 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
}

.card:hover {
    transform: translateY(-10px); /* 悬停时上浮 */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2); /* 增强阴影 */
}

/* 按钮样式 */
.button-primary {
    background-color: #F97316; /* 橙色背景 */
    border: none; /* 无边框 */
    color: #FFFFFF; /* 白色文字 */
    padding: 10px 20px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 手型光标 */
    transition: background-color 0.3s ease; /* 过渡效果 */
    font-size: 1em; /* 字号 */
}

.button-primary:hover {
    background-color: #EA580C; /* 悬停时颜色变化 */
}

.button-secondary {
    background-color: #10B981; /* 绿色背景 */
    border: none; /* 无边框 */
    color: #FFFFFF; /* 白色文字 */
    padding: 10px 20px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 手型光标 */
    transition: background-color 0.3s ease; /* 过渡效果 */
    font-size: 1em; /* 字号 */
}

.button-secondary:hover {
    background-color: #059669; /* 悬停时颜色变化 */
}

/* 代码高亮样式 */
.code-example {
    background: #1F2937; /* 深灰背景 */
    padding: 15px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    overflow-x: auto; /* 横向滚动 */
    margin: 20px 0; /* 上下外边距 */
}

.code-example code {
    color: #F97316; /* 橙色代码文字 */
    font-family: 'Courier New', Courier, monospace; /* 等宽字体 */
    display: block; /* 块级显示 */
    white-space: pre; /* 保持格式 */
}

/* 面包屑导航样式 */
.breadcrumb {
    display: flex; /* 弹性布局 */
    list-style: none; /* 无列表样式 */
    padding: 10px 20px; /* 内边距 */
    background-color: rgba(247, 124, 29, 0.1); /* 橙色背景 */
    border-radius: 5px; /* 圆角 */
    margin-bottom: 20px; /* 下边距 */
}

.breadcrumb li + li::before {
    content: ">";
    padding: 0 8px; /* 左右间距 */
    color: #F97316; /* 橙色 */
}

.breadcrumb a {
    color: #10B981; /* 绿色链接 */
    text-decoration: none; /* 去掉下划线 */
    transition: color 0.3s ease; /* 过渡效果 */
}

.breadcrumb a:hover {
    color: #059669; /* 悬停时颜色变化 */
}

/* 折叠区域样式 */
.collapsible {
    background-color: #1E3A8A; /* 深蓝背景 */
    color: #FFFFFF; /* 白色文字 */
    cursor: pointer; /* 指针光标 */
    padding: 18px; /* 内边距 */
    width: 100%; /* 全宽 */
    border: none; /* 无边框 */
    text-align: left; /* 左对齐 */
    outline: none; /* 无轮廓 */
    font-size: 1.2em; /* 字号 */
    transition: background-color 0.3s ease; /* 过渡效果 */
    border-radius: 5px; /* 圆角 */
    margin-bottom: 10px; /* 下边距 */
}

.active, .collapsible:hover {
    background-color: #374151; /* 悬停和激活时背景色变化 */
}

.content {
    padding: 0 18px; /* 内边距 */
    max-height: 0; /* 初始高度为0 */
    overflow: hidden; /* 隐藏溢出内容 */
    transition: max-height 0.3s ease; /* 高度过渡效果 */
    background-color: #1E3A8A; /* 背景色 */
    border-radius: 5px; /* 圆角 */
    margin-bottom: 10px; /* 下边距 */
}

.content p {
    color: #D1D5DB; /* 浅灰色文字 */
    padding: 10px 0; /* 上下内边距 */
}