/* ============================================
   内页通用样式 - 军事战术深色风格
   包含：页面标题区、服务器详情、内容卡片、列表样式
   ============================================ */

/* ========== 主内容区域 ========== */
/* 主内容容器 */
.main-content {
    /* 顶部内边距（避开导航栏） */
    padding-top: 100px;
    /* 底部内边距 */
    padding-bottom: 80px;
    /* 左右内边距 */
    padding-left: 20px;
    padding-right: 20px;
    /* 最大宽度 */
    max-width: 1400px;
    /* 水平居中 */
    margin: 0 auto;
}

/* ========== 页面标题区域 ========== */
/* 页面头部 */
.page-header {
    /* 文字居中 */
    text-align: center;
    /* 下边距 */
    margin-bottom: 60px;
    /* 内边距底部 */
    padding-bottom: 30px;
    /* 底部边框 */
    border-bottom: 1px solid #2a2a40;
}

/* 页面主标题 */
.page-title {
    /* 字体大小 */
    font-size: 42px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 字母间距 */
    letter-spacing: 8px;
    /* 下边距 */
    margin-bottom: 15px;
    /* 相对定位 */
    position: relative;
    /* 内边距底部 */
    padding-bottom: 20px;
}

/* 页面标题底部装饰线 */
.page-title::after {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离底部为0 */
    bottom: 0;
    /* 距离左侧50% */
    left: 50%;
    /* 宽度60px */
    width: 60px;
    /* 高度3px */
    height: 3px;
    /* 背景色军绿色 */
    background: #4a7c59;
    /* 水平居中偏移 */
    transform: translateX(-50%);
}

/* 页面副标题 */
.page-subtitle {
    /* 文字颜色 */
    color: #888;
    /* 字体大小 */
    font-size: 16px;
    /* 字母间距 */
    letter-spacing: 3px;
}

/* ========== 刷新提示 ========== */
/* 刷新信息区域 */
.refresh-info {
    /* 文字居中 */
    text-align: center;
    /* 文字颜色 */
    color: #666;
    /* 字体大小 */
    font-size: 13px;
    /* 下边距 */
    margin-bottom: 40px;
    /* flex布局 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 元素间距 */
    gap: 10px;
}

/* 刷新图标旋转动画 */
.refresh-icon {
    /* 行内块级元素 */
    display: inline-block;
    /* 动画：旋转 */
    animation: spin 2s linear infinite;
    /* 动画播放状态默认暂停 */
    animation-play-state: paused;
}

/* 加载时旋转 */
.refresh-icon.loading {
    /* 播放动画 */
    animation-play-state: running;
}

/* 旋转动画定义 */
@keyframes spin {
    /* 起始状态 */
    from {
        /* 旋转0度 */
        transform: rotate(0deg);
    }
    /* 结束状态 */
    to {
        /* 旋转360度 */
        transform: rotate(360deg);
    }
}

/* ========== 服务器切换列表 ========== */
/* 服务器切换容器 */
.server-switcher {
    /* 背景色 */
    background: #222236;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 20px;
    /* 下边距 */
    margin-bottom: 30px;
    /* 顶部装饰 */
    border-top: 3px solid #4a7c59;
}

/* 切换标签 */
.server-switcher-label {
    /* 字体大小 */
    font-size: 14px;
    /* 文字颜色 */
    color: #888;
    /* 下边距 */
    margin-bottom: 15px;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* 切换列表 */
.server-switcher-list {
    /* flex布局 */
    display: flex;
    /* 自动换行 */
    flex-wrap: wrap;
    /* 元素间距 */
    gap: 12px;
}

/* 单个切换项 */
.server-switcher-item {
    /* flex布局 */
    display: flex;
    /* 纵向排列 */
    flex-direction: column;
    /* 内边距 */
    padding: 12px 18px;
    /* 背景色 */
    background: #1a1a2e;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 圆角 */
    border-radius: 4px;
    /* 去除下划线 */
    text-decoration: none;
    /* 过渡动画 */
    transition: all 0.3s ease;
    /* 最小宽度 */
    min-width: 150px;
}

/* 切换项悬停 */
.server-switcher-item:hover {
    /* 背景色 */
    background: #2a2a40;
    /* 边框颜色 */
    border-color: #4a7c59;
    /* 变换 */
    transform: translateY(-2px);
}

/* 切换项激活状态 */
.server-switcher-item.active {
    /* 背景色 */
    background: rgba(74, 124, 89, 0.15);
    /* 边框颜色 */
    border-color: #4a7c59;
}

/* 服务器名称 */
.switcher-name {
    /* 字体大小 */
    font-size: 14px;
    /* 字体粗细 */
    font-weight: 500;
    /* 文字颜色 */
    color: #e0e0e0;
    /* 下边距 */
    margin-bottom: 6px;
}

/* 状态文字 */
.switcher-status {
    /* 字体大小 */
    font-size: 12px;
    /* 文字颜色 */
    color: #888;
    /* 圆角 */
    border-radius: 3px;
    /* 内边距 */
    padding: 2px 8px;
    /* 显示为inline-block */
    display: inline-block;
}

/* 在线状态 */
.switcher-status.online {
    /* 背景色 */
    background: rgba(74, 124, 89, 0.2);
    /* 文字颜色 */
    color: #4a7c59;
}

/* 离线状态 */
.switcher-status.offline {
    /* 背景色 */
    background: rgba(232, 168, 56, 0.2);
    /* 文字颜色 */
    color: #e8a838;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .server-switcher-list {
        /* 纵向排列 */
        flex-direction: column;
    }
    
    .server-switcher-item {
        /* 宽度100% */
        width: 100%;
        /* 横向排列 */
        flex-direction: row;
        /* 居中对齐 */
        align-items: center;
        /* 两端对齐 */
        justify-content: space-between;
    }
    
    .switcher-name {
        /* 取消下边距 */
        margin-bottom: 0;
    }
}

/* ========== 服务器详情卡片 ========== */
/* 服务器详情卡片容器 */
.server-detail-card {
    /* 背景色稍深 */
    background: #222236;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 40px;
    /* 下边距 */
    margin-bottom: 40px;
    /* 相对定位 */
    position: relative;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 过渡动画 */
    transition: all 0.3s ease;
}

/* 服务器卡片顶部装饰条 */
.server-detail-card::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离顶部为0 */
    top: 0;
    /* 距离左侧为0 */
    left: 0;
    /* 宽度100% */
    width: 100%;
    /* 高度4px */
    height: 4px;
    /* 背景渐变 */
    background: linear-gradient(90deg, #4a7c59, #e8a838);
}

/* 服务器详情头部 */
.server-detail-header {
    /* flex布局 */
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    /* 垂直居中 */
    align-items: flex-start;
    /* 底部边框 */
    border-bottom: 1px solid #2a2a40;
    /* 底部内边距 */
    padding-bottom: 25px;
    /* 下边距 */
    margin-bottom: 30px;
    /* 自动换行 */
    flex-wrap: wrap;
    /* 元素间距 */
    gap: 20px;
}

/* 服务器名称和状态 */
.server-title-group {
    /* flex布局 */
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 元素间距 */
    gap: 20px;
    /* 自动换行 */
    flex-wrap: wrap;
}

/* 服务器名称 */
.server-detail-name {
    /* 字体大小 */
    font-size: 32px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 字母间距 */
    letter-spacing: 2px;
}

/* 服务器状态指示器 */
.server-status {
    /* flex布局 */
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 元素间距 */
    gap: 10px;
    /* 内边距 */
    padding: 8px 16px;
    /* 边框 */
    border: 1px solid #4a7c59;
    /* 背景色 */
    background: rgba(74, 124, 89, 0.1);
}

/* 离线状态样式 */
.server-status.offline {
    /* 边框色灰色 */
    border-color: #555;
    /* 背景色灰色半透明 */
    background: rgba(85, 85, 85, 0.1);
}

/* 状态指示灯 */
.status-dot {
    /* 宽度14px */
    width: 14px;
    /* 高度14px */
    height: 14px;
    /* 圆角50%变圆形 */
    border-radius: 50%;
    /* 背景色绿色（在线） */
    background: #4a7c59;
    /* 动画：呼吸闪烁 */
    animation: pulse 2s infinite;
}

/* 离线状态指示灯 */
.status-dot.offline {
    /* 背景色灰色 */
    background: #555;
    /* 取消动画 */
    animation: none;
}

/* 状态文字 */
.status-text {
    /* 字体大小 */
    font-size: 14px;
    /* 文字颜色 */
    color: #4a7c59;
    /* 字体粗细 */
    font-weight: bold;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* 离线状态文字 */
.status-text.offline {
    /* 颜色灰色 */
    color: #888;
}

/* 服务器类型标签 */
.server-type-badge {
    /* 内边距 */
    padding: 8px 20px;
    /* 字体大小 */
    font-size: 13px;
    /* 边框 */
    border: 1px solid #e8a838;
    /* 文字颜色 */
    color: #e8a838;
    /* 字母间距 */
    letter-spacing: 2px;
    /* 字体粗细 */
    font-weight: bold;
    /* 文字转换大写 */
    text-transform: uppercase;
}

/* ========== 服务器参数网格 ========== */
/* 参数网格容器 */
.server-params-grid {
    /* CSS网格布局 */
    display: grid;
    /* 四列等宽 */
    grid-template-columns: repeat(4, 1fr);
    /* 卡片间距 */
    gap: 20px;
    /* 下边距 */
    margin-bottom: 30px;
}

/* 参数卡片样式 */
.param-card {
    /* 背景色深色 */
    background: #1a1a2e;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 20px;
    /* 文字居中 */
    text-align: center;
    /* 过渡动画 */
    transition: all 0.3s ease;
}

/* 参数卡片悬停效果 */
.param-card:hover {
    /* 边框变色 */
    border-color: #4a7c59;
    /* 向上移动2px */
    transform: translateY(-2px);
}

/* 参数图标/数值 */
.param-value {
    /* 字体大小 */
    font-size: 28px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色橙黄色 */
    color: #e8a838;
    /* 下边距 */
    margin-bottom: 8px;
}

/* 参数标签 */
.param-label {
    /* 字体大小 */
    font-size: 13px;
    /* 文字颜色 */
    color: #888;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* ========== 玩家进度条区域 ========== */
/* 玩家区域容器 */
.player-section {
    /* 背景色深色 */
    background: #1a1a2e;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 30px;
    /* 下边距 */
    margin-bottom: 30px;
}

/* 玩家区域标题 */
.player-section-title {
    /* 字体大小 */
    font-size: 18px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 下边距 */
    margin-bottom: 20px;
    /* 字母间距 */
    letter-spacing: 2px;
    /* 相对定位 */
    position: relative;
    /* 左侧内边距 */
    padding-left: 15px;
}

/* 标题左侧装饰线 */
.player-section-title::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离左侧为0 */
    left: 0;
    /* 距离顶部50% */
    top: 50%;
    /* 宽度4px */
    width: 4px;
    /* 高度20px */
    height: 20px;
    /* 背景色军绿色 */
    background: #4a7c59;
    /* 垂直居中 */
    transform: translateY(-50%);
}

/* 玩家数字显示 */
.player-count-large {
    /* flex布局 */
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    /* 垂直居中 */
    align-items: baseline;
    /* 字体大小 */
    font-size: 16px;
    /* 下边距 */
    margin-bottom: 15px;
}

/* 玩家数量大数字 */
.player-count-large .num {
    /* 字体大小 */
    font-size: 36px;
    /* 字体粗细 */
    font-weight: bold;
    /* 颜色橙黄色 */
    color: #e8a838;
}

/* 进度条背景 */
.progress-bar-large {
    /* 宽度100% */
    width: 100%;
    /* 高度12px */
    height: 12px;
    /* 背景深色 */
    background: #0f0f1a;
    /* 圆角 */
    border-radius: 6px;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 边框 */
    border: 1px solid #2a2a40;
}

/* 进度条填充 */
.progress-fill-large {
    /* 高度100% */
    height: 100%;
    /* 宽度由JS控制 */
    width: 0%;
    /* 背景渐变 */
    background: linear-gradient(90deg, #4a7c59, #e8a838);
    /* 过渡动画 */
    transition: width 0.5s ease;
    /* 圆角 */
    border-radius: 6px;
    /* 相对定位 */
    position: relative;
}

/* 进度条光效 */
.progress-fill-large::after {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离顶部为0 */
    top: 0;
    /* 距离左侧为0 */
    left: 0;
    /* 宽度100% */
    width: 100%;
    /* 高度50% */
    height: 50%;
    /* 背景白色渐变 */
    background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
}

/* ========== 服务器详细信息列表 ========== */
/* 信息列表容器 */
.server-info-list {
    /* 背景色深色 */
    background: #1a1a2e;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 30px;
    /* 下边距 */
    margin-bottom: 30px;
}

/* 信息列表标题 */
.info-list-title {
    /* 字体大小 */
    font-size: 18px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 下边距 */
    margin-bottom: 20px;
    /* 字母间距 */
    letter-spacing: 2px;
    /* 相对定位 */
    position: relative;
    /* 左侧内边距 */
    padding-left: 15px;
}

/* 标题左侧装饰线 */
.info-list-title::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离左侧为0 */
    left: 0;
    /* 距离顶部50% */
    top: 50%;
    /* 宽度4px */
    width: 4px;
    /* 高度20px */
    height: 20px;
    /* 背景色军绿色 */
    background: #4a7c59;
    /* 垂直居中 */
    transform: translateY(-50%);
}

/* 信息行 */
.info-row {
    /* flex布局 */
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    /* 内边距上下 */
    padding: 12px 0;
    /* 底部边框 */
    border-bottom: 1px dashed #2a2a40;
    /* 字体大小 */
    font-size: 14px;
}

/* 最后一行去掉底部边框 */
.info-row:last-child {
    /* 底部边框无 */
    border-bottom: none;
}

/* 信息标签 */
.info-label {
    /* 颜色浅灰 */
    color: #888;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* 信息值 */
.info-value {
    /* 颜色白色 */
    color: #e0e0e0;
    /* 字体粗细 */
    font-weight: 500;
    /* 文字右对齐 */
    text-align: right;
}

/* 连接地址可复制样式 */
.info-value.selectable {
    /* 字体等宽 */
    font-family: monospace;
    /* 背景色 */
    background: #0f0f1a;
    /* 内边距 */
    padding: 4px 10px;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 鼠标手型 */
    cursor: pointer;
    /* 过渡动画 */
    transition: all 0.3s ease;
}

/* 可复制文字悬停效果 */
.info-value.selectable:hover {
    /* 边框变色 */
    border-color: #4a7c59;
    /* 文字颜色 */
    color: #4a7c59;
}

/* ========== 底部操作按钮区 ========== */
/* 操作按钮容器 */
.server-actions {
    /* flex布局 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 元素间距 */
    gap: 20px;
    /* 顶部内边距 */
    padding-top: 20px;
    /* 自动换行 */
    flex-wrap: wrap;
}

/* 高亮按钮样式 */
.btn-accent {
    /* 背景色橙黄色 */
    background: #e8a838;
    /* 边框色橙黄色 */
    border-color: #e8a838;
    /* 文字颜色深色 */
    color: #1a1a2e;
}

/* 高亮按钮悬停效果 */
.btn-accent:hover {
    /* 背景变深 */
    background: #d4962e;
    /* 边框变深 */
    border-color: #d4962e;
    /* 向上移动2px */
    transform: translateY(-2px);
    /* 添加阴影 */
    box-shadow: 0 5px 20px rgba(232, 168, 56, 0.4);
    /* 文字颜色保持深色 */
    color: #1a1a2e;
}

/* ========== 呼吸闪烁动画 ========== */
@keyframes pulse {
    /* 0%状态 */
    0% {
        /* 完全不透明 */
        opacity: 1;
        /* 阴影 */
        box-shadow: 0 0 5px #4a7c59;
    }
    /* 50%状态 */
    50% {
        /* 半透明 */
        opacity: 0.5;
        /* 更大的阴影 */
        box-shadow: 0 0 15px #4a7c59;
    }
    /* 100%状态 */
    100% {
        /* 完全不透明 */
        opacity: 1;
        /* 阴影 */
        box-shadow: 0 0 5px #4a7c59;
    }
}

/* ========== 内页内容区域 ========== */
/* 内容卡片容器 */
.content-section {
    /* 背景色 */
    background: #222236;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 40px;
    /* 相对定位 */
    position: relative;
    /* 顶部装饰条 */
    border-top: 3px solid #4a7c59;
}

/* 内容标题 */
.content-title {
    /* 字体大小 */
    font-size: 24px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 下边距 */
    margin-bottom: 20px;
    /* 底部内边距 */
    padding-bottom: 15px;
    /* 底部边框 */
    border-bottom: 1px solid #2a2a40;
    /* 字母间距 */
    letter-spacing: 2px;
}

/* 内容段落 */
.content-paragraph {
    /* 文字颜色 */
    color: #c0c0c0;
    /* 行高 */
    line-height: 2;
    /* 下边距 */
    margin-bottom: 20px;
    /* 字体大小 */
    font-size: 15px;
}

/* 内容列表 */
.content-list {
    /* 下边距 */
    margin-bottom: 20px;
}

/* 内容列表项 */
.content-list li {
    /* 相对定位 */
    position: relative;
    /* 左侧内边距 */
    padding-left: 25px;
    /* 行高 */
    line-height: 2;
    /* 文字颜色 */
    color: #c0c0c0;
    /* 字体大小 */
    font-size: 15px;
}

/* 内容列表项标记 */
.content-list li::before {
    /* 内容 */
    content: '▸';
    /* 绝对定位 */
    position: absolute;
    /* 距离左侧为0 */
    left: 0;
    /* 颜色军绿色 */
    color: #4a7c59;
    /* 字体粗细 */
    font-weight: bold;
}

/* 高亮文本 */
.highlight-text {
    /* 颜色橙黄色 */
    color: #e8a838;
    /* 字体粗细 */
    font-weight: bold;
}

/* 军绿色高亮文本 */
.accent-text {
    /* 颜色军绿色 */
    color: #4a7c59;
    /* 字体粗细 */
    font-weight: bold;
}

/* 分割线 */
.divider {
    /* 高度 */
    height: 1px;
    /* 背景色 */
    background: #2a2a40;
    /* 上下边距 */
    margin: 30px 0;
}

/* 网格布局 - 两列 */
.grid-2 {
    /* CSS网格布局 */
    display: grid;
    /* 两列等宽 */
    grid-template-columns: repeat(2, 1fr);
    /* 间距 */
    gap: 30px;
    /* 下边距 */
    margin-bottom: 30px;
}

/* 网格布局 - 三列 */
.grid-3 {
    /* CSS网格布局 */
    display: grid;
    /* 三列等宽 */
    grid-template-columns: repeat(3, 1fr);
    /* 间距 */
    gap: 30px;
    /* 下边距 */
    margin-bottom: 30px;
}

/* ========== 响应式适配 - 平板端 ========== */
@media (max-width: 992px) {
    /* 参数网格改为两列 */
    .server-params-grid {
        /* 两列布局 */
        grid-template-columns: repeat(2, 1fr);
    }

    /* 两列网格变单列 */
    .grid-2,
    .grid-3 {
        /* 单列布局 */
        grid-template-columns: 1fr;
    }
}

/* ========== 移动端响应式适配 ========== */
@media (max-width: 768px) {
    /* 导航栏内边距调整 */
    .navbar {
        /* 上下左右内边距 */
        padding: 15px 20px;
    }

    /* 滚动后导航栏内边距 */
    .navbar.scrolled {
        /* 上下左右内边距 */
        padding: 12px 20px;
    }

    /* 显示移动端菜单按钮 */
    .nav-toggle {
        /* 显示为flex */
        display: flex;
    }

    /* 导航菜单默认隐藏 */
    .nav-menu {
        /* 固定定位 */
        position: fixed;
        /* 距离顶部60px */
        top: 60px;
        /* 距离左侧为0 */
        left: 0;
        /* 宽度100% */
        width: 100%;
        /* 背景色深色 */
        background: rgba(26, 26, 46, 0.98);
        /* 改为纵向排列 */
        flex-direction: column;
        /* 元素居中 */
        align-items: center;
        /* 内边距 */
        padding: 30px 0;
        /* 元素间距 */
        gap: 25px;
        /* 默认隐藏 */
        display: none;
        /* 底部边框 */
        border-bottom: 2px solid #4a7c59;
    }

    /* 导航菜单激活状态（显示） */
    .nav-menu.active {
        /* 显示为flex */
        display: flex;
    }

    /* 主内容顶部内边距调整 */
    .main-content {
        /* 顶部内边距 */
        padding-top: 80px;
    }

    /* 页面标题缩小 */
    .page-title {
        /* 字体大小 */
        font-size: 30px;
        /* 字母间距 */
        letter-spacing: 4px;
    }

    /* 服务器详情卡片内边距减小 */
    .server-detail-card {
        /* 内边距 */
        padding: 25px 20px;
    }

    /* 服务器名称缩小 */
    .server-detail-name {
        /* 字体大小 */
        font-size: 24px;
    }

    /* 参数网格改为单列 */
    .server-params-grid {
        /* 单列布局 */
        grid-template-columns: 1fr;
    }

    /* 按钮宽度充满 */
    .btn {
        /* 宽度100% */
        width: 100%;
    }

    /* 页脚链接间距减小 */
    .footer-links {
        /* 元素间距 */
        gap: 15px;
    }

    /* 内容卡片内边距减小 */
    .content-section {
        /* 内边距 */
        padding: 25px;
    }

    /* 内容标题缩小 */
    .content-title {
        /* 字体大小 */
        font-size: 20px;
    }
}

/* ========== 文章内容布局（带右侧边导航） ========== */
.article-layout {
    /* flex布局 */
    display: flex;
    /* 元素间距 */
    gap: 40px;
    /* 相对定位 */
    position: relative;
    /* 内容区在前，侧边栏在后（flex顺序） */
    flex-direction: row;
}

/* 文章内容主体 */
.article-content {
    /* 弹性1 */
    flex: 1;
    /* 最小宽度0 */
    min-width: 0;
    /* 排序：内容在左 */
    order: 1;
    /* 为右侧固定导航留出空间 */
    margin-right: 250px;
}

/* ========== 文章右侧导航目录 ========== */
.article-toc {
    /* 固定宽度 */
    width: 220px;
    /* 不收缩 */
    flex-shrink: 0;
    /* 固定定位 - 不跟随文章滚动 */
    position: fixed;
    /* 距离顶部100px */
    top: 100px;
    /* 右侧定位 */
    right: calc((100% - 1200px) / 2 + 20px);
    /* 最大高度 */
    max-height: calc(100vh - 140px);
    /* 背景色 */
    background: linear-gradient(180deg, #222236 0%, #1e1e30 100%);
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 顶部装饰条 - 军事风格双色 */
    border-top: 3px solid #4a7c59;
    /* 圆角 */
    border-radius: 6px;
    /* 溢出自动滚动 */
    overflow-y: auto;
    /* 滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: #4a7c59 #1a1a2e;
    /* 阴影 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    /* 排序：侧边栏在右 */
    order: 2;
}

/* 右侧导航额外样式 */
.article-toc.toc-right {
    /* 右侧装饰 - 左侧边框高亮 */
    border-left: 2px solid rgba(74, 124, 89, 0.3);
}

/* 侧边导航滚动条 */
.article-toc::-webkit-scrollbar {
    width: 4px;
}
.article-toc::-webkit-scrollbar-track {
    background: #1a1a2e;
    border-radius: 2px;
}
.article-toc::-webkit-scrollbar-thumb {
    background: #4a7c59;
    border-radius: 2px;
}
.article-toc::-webkit-scrollbar-thumb:hover {
    background: #5a9469;
}

/* 目录头部 */
.toc-header {
    /* 内边距 */
    padding: 16px 18px;
    /* 底部边框 */
    border-bottom: 1px solid #2a2a40;
    /* 背景渐变 */
    background: linear-gradient(90deg, rgba(74, 124, 89, 0.1) 0%, transparent 100%);
}

.toc-header h3 {
    /* 字体大小 */
    font-size: 14px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色 */
    color: #4a7c59;
    /* 字母间距 */
    letter-spacing: 3px;
    /* 文字居中 */
    text-align: center;
    /* 文字变换 - 大写 */
    text-transform: uppercase;
}

/* 目录导航 */
.toc-nav {
    /* 内边距 */
    padding: 12px 0;
}

.toc-nav ul {
    /* 去掉列表样式 */
    list-style: none;
    /* 内边距为0 */
    padding: 0;
    /* 外边距为0 */
    margin: 0;
}

.toc-nav li {
    /* 外边距为0 */
    margin: 0;
}

/* 目录链接 */
.toc-link {
    /* 块级元素 */
    display: block;
    /* 内边距 */
    padding: 10px 18px 10px 22px;
    /* 文字颜色 */
    color: #888;
    /* 去除下划线 */
    text-decoration: none;
    /* 字体大小 */
    font-size: 13px;
    /* 行高 */
    line-height: 1.6;
    /* 过渡动画 */
    transition: all 0.25s ease;
    /* 左侧边框透明 */
    border-left: 2px solid transparent;
    /* 相对定位 */
    position: relative;
    /* 字体粗细 */
    font-weight: 400;
}

/* 目录链接悬停 */
.toc-link:hover {
    /* 背景色 */
    background: rgba(74, 124, 89, 0.1);
    /* 文字颜色 */
    color: #c0c0c0;
    /* 左侧边框 */
    border-left-color: #4a7c59;
    /* 左侧内边距增加 */
    padding-left: 24px;
}

/* 目录链接激活状态 */
.toc-link.active {
    /* 背景色 */
    background: rgba(74, 124, 89, 0.18);
    /* 文字颜色 */
    color: #4a7c59;
    /* 字体加粗 */
    font-weight: 600;
    /* 左侧边框 */
    border-left-color: #4a7c59;
    /* 左侧内边距 */
    padding-left: 24px;
}

/* 目录社交按钮区 */
.toc-social {
    /* 内边距 */
    padding: 14px 16px 18px;
    /* 顶部边框 */
    border-top: 1px solid #2a2a40;
    /* 显示为flex */
    display: flex;
    /* 纵向排列 */
    flex-direction: column;
    /* 元素间距 */
    gap: 10px;
    /* 顶部外边距 */
    margin-top: auto;
}

/* 顶部社交按钮区（目录上方） */
.toc-social.toc-social-top {
    /* 顶部无边距 */
    margin-top: 0;
    /* 顶部边框移除 */
    border-top: none;
    /* 底部边框 */
    border-bottom: 1px solid #2a2a40;
    /* 内边距调整 */
    padding: 16px 16px 14px;
    /* 背景渐变 - 军事风格装饰 */
    background: linear-gradient(180deg, rgba(74, 124, 89, 0.08) 0%, transparent 100%);
    /* 顶部圆角 */
    border-radius: 5px 5px 0 0;
}

/* 目录社交按钮 */
.toc-btn {
    /* flex布局 */
    display: flex;
    /* 居中对齐 */
    align-items: center;
    justify-content: center;
    /* 内边距 */
    padding: 9px 14px;
    /* 字体大小 */
    font-size: 12px;
    /* 字体粗细 */
    font-weight: 500;
    /* 去除下划线 */
    text-decoration: none;
    /* 圆角 */
    border-radius: 4px;
    /* 过渡动画 */
    transition: all 0.3s ease;
    /* 元素间距 */
    gap: 6px;
    /* 文字颜色 */
    color: #fff;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* QQ按钮 - 军事风格橙色 */
.toc-btn.toc-qq {
    background: linear-gradient(135deg, #e8a838 0%, #d4942a 100%);
    border: 1px solid #e8a838;
    box-shadow: 0 2px 8px rgba(232, 168, 56, 0.25);
}
.toc-btn.toc-qq:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(232, 168, 56, 0.4);
    background: linear-gradient(135deg, #f0b848 0%, #e8a838 100%);
}

/* KOOK按钮 - 军事风格军绿 */
.toc-btn.toc-kook {
    background: linear-gradient(135deg, #4a7c59 0%, #3d6649 100%);
    border: 1px solid #4a7c59;
    box-shadow: 0 2px 8px rgba(74, 124, 89, 0.25);
}
.toc-btn.toc-kook:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 124, 89, 0.4);
    background: linear-gradient(135deg, #5a9469 0%, #4a7c59 100%);
}

/* 移动端目录切换按钮 */
.mobile-toc-toggle {
    /* 默认隐藏 */
    display: none;
    /* 内边距 */
    padding: 12px 20px;
    /* 背景色 */
    background: linear-gradient(90deg, #222236 0%, #1e1e30 100%);
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 文字颜色 */
    color: #c0c0c0;
    /* 字体大小 */
    font-size: 14px;
    /* 字体粗细 */
    font-weight: 500;
    /* 鼠标手型 */
    cursor: pointer;
    /* 下边距 */
    margin-bottom: 20px;
    /* 文字居中 */
    text-align: center;
    /* 过渡动画 */
    transition: all 0.3s ease;
    /* 顶部装饰 */
    border-top: 3px solid #4a7c59;
    /* 圆角 */
    border-radius: 6px;
    /* 字母间距 */
    letter-spacing: 2px;
}
.mobile-toc-toggle:hover {
    background: linear-gradient(90deg, #2a2a40 0%, #222236 100%);
    color: #4a7c59;
}

/* ========== 平板端响应式适配（文章导航） ========== */
@media (max-width: 1200px) {
    .article-toc {
        width: 200px;
        right: 20px;
    }
    
    .article-layout {
        gap: 30px;
    }
    
    .article-content {
        margin-right: 220px;
    }
}

@media (max-width: 992px) {
    .article-layout {
        /* 改为纵向 */
        flex-direction: column;
    }
    
    .article-content {
        /* 重置排序 */
        order: 2;
        /* 移动端取消右边距 */
        margin-right: 0;
    }
    
    .article-toc {
        /* 宽度100% */
        width: 100%;
        /* 静态定位 */
        position: static;
        /* 最大高度 */
        max-height: none;
        /* 默认隐藏 */
        display: none;
        /* 下边距 */
        margin-bottom: 20px;
        /* 重置排序 */
        order: 1;
    }
    
    .article-toc.mobile-show {
        /* 显示 */
        display: block;
    }
    
    .mobile-toc-toggle {
        /* 显示 */
        display: block;
        /* 重置排序 */
        order: 0;
    }
    
    .toc-social {
        /* 横向排列 */
        flex-direction: row;
        /* 居中 */
        justify-content: center;
    }
    
    .toc-btn {
        flex: 1;
        max-width: 200px;
    }
}

/* ========== 规则内容区域 ========== */
/* 规则内容容器 */
.rules-content {
    /* 背景色稍深 */
    background: #222236;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 50px;
    /* 相对定位 */
    position: relative;
    /* 溢出隐藏 */
    overflow: hidden;
}

/* 规则内容顶部装饰条 */
.rules-content::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离顶部为0 */
    top: 0;
    /* 距离左侧为0 */
    left: 0;
    /* 宽度100% */
    width: 100%;
    /* 高度4px */
    height: 4px;
    /* 背景渐变 */
    background: linear-gradient(90deg, #4a7c59, #e8a838);
}

/* 规则分类标题 */
.rule-category {
    /* 字体大小 */
    font-size: 24px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 上边距 */
    margin-top: 40px;
    /* 下边距 */
    margin-bottom: 20px;
    /* 字母间距 */
    letter-spacing: 2px;
    /* 相对定位 */
    position: relative;
    /* 左侧内边距 */
    padding-left: 20px;
}

/* 第一个分类标题去掉上边距 */
.rule-category:first-of-type {
    /* 上边距为0 */
    margin-top: 0;
}

/* 分类标题左侧装饰条 */
.rule-category::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离左侧为0 */
    left: 0;
    /* 距离顶部50% */
    top: 50%;
    /* 宽度5px */
    width: 5px;
    /* 高度24px */
    height: 24px;
    /* 背景色橙黄色 */
    background: #e8a838;
    /* 垂直居中 */
    transform: translateY(-50%);
}

/* 规则列表 */
.rule-list {
    /* 列表样式：十进制 */
    list-style: decimal;
    /* 左侧内边距 */
    padding-left: 30px;
    /* 下边距 */
    margin-bottom: 10px;
}

/* 规则列表项 */
.rule-list li {
    /* 字体大小 */
    font-size: 15px;
    /* 文字颜色 */
    color: #c0c0c0;
    /* 下边距 */
    margin-bottom: 12px;
    /* 行高 */
    line-height: 1.8;
    /* 相对定位 */
    position: relative;
}

/* 规则列表中的强调文字 */
.rule-list strong {
    /* 颜色橙黄色 */
    color: #e8a838;
    /* 字体粗细 */
    font-weight: bold;
}

/* 规则子列表 */
.rule-list ul {
    /* 列表样式：圆点 */
    list-style: disc;
    /* 左侧内边距 */
    padding-left: 25px;
    /* 上边距 */
    margin-top: 8px;
}

/* 规则子列表项 */
.rule-list ul li {
    /* 字体大小稍小 */
    font-size: 14px;
    /* 下边距 */
    margin-bottom: 6px;
    /* 颜色稍浅 */
    color: #a0a0a0;
}

/* 警告提示框 */
.warning-box {
    /* 背景色 */
    background: rgba(232, 168, 56, 0.1);
    /* 左边框 */
    border-left: 4px solid #e8a838;
    /* 内边距 */
    padding: 20px 25px;
    /* 上边距 */
    margin-top: 30px;
    /* 下边距 */
    margin-bottom: 30px;
}

/* 警告标题 */
.warning-title {
    /* 字体大小 */
    font-size: 16px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色橙黄色 */
    color: #e8a838;
    /* 下边距 */
    margin-bottom: 10px;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* 警告内容 */
.warning-content {
    /* 字体大小 */
    font-size: 14px;
    /* 文字颜色 */
    color: #c0c0c0;
    /* 行高 */
    line-height: 1.8;
}

/* 重要提示框 */
.important-box {
    /* 背景色 */
    background: rgba(74, 124, 89, 0.1);
    /* 左边框 */
    border-left: 4px solid #4a7c59;
    /* 内边距 */
    padding: 20px 25px;
    /* 上边距 */
    margin-top: 30px;
    /* 下边距 */
    margin-bottom: 30px;
}

/* 重要标题 */
.important-title {
    /* 字体大小 */
    font-size: 16px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色军绿色 */
    color: #4a7c59;
    /* 下边距 */
    margin-bottom: 10px;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* 重要内容 */
.important-content {
    /* 字体大小 */
    font-size: 14px;
    /* 文字颜色 */
    color: #c0c0c0;
    /* 行高 */
    line-height: 1.8;
}

/* ========== 战队规章页面样式 ========== */
/* 规章内容容器 */
.regulations-content {
    /* 背景色稍深 */
    background: #222236;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 50px;
    /* 相对定位 */
    position: relative;
    /* 溢出隐藏 */
    overflow: hidden;
}

/* 规章内容顶部装饰条 */
.regulations-content::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离顶部为0 */
    top: 0;
    /* 距离左侧为0 */
    left: 0;
    /* 宽度100% */
    width: 100%;
    /* 高度4px */
    height: 4px;
    /* 背景渐变 */
    background: linear-gradient(90deg, #4a7c59, #e8a838);
}

/* 规章分类标题 */
.regulation-category {
    /* 字体大小 */
    font-size: 24px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 上边距 */
    margin-top: 40px;
    /* 下边距 */
    margin-bottom: 20px;
    /* 字母间距 */
    letter-spacing: 2px;
    /* 相对定位 */
    position: relative;
    /* 左侧内边距 */
    padding-left: 20px;
}

/* 第一个分类标题去掉上边距 */
.regulation-category:first-child {
    /* 上边距为0 */
    margin-top: 0;
}

/* 分类标题左侧装饰条 */
.regulation-category::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离左侧为0 */
    left: 0;
    /* 距离顶部50% */
    top: 50%;
    /* 宽度5px */
    width: 5px;
    /* 高度24px */
    height: 24px;
    /* 背景色军绿色 */
    background: #4a7c59;
    /* 垂直居中 */
    transform: translateY(-50%);
}

/* 规章列表 */
.regulation-list {
    /* 列表样式：十进制 */
    list-style: decimal;
    /* 左侧内边距 */
    padding-left: 30px;
    /* 下边距 */
    margin-bottom: 10px;
}

/* 规章列表项 */
.regulation-list li {
    /* 字体大小 */
    font-size: 15px;
    /* 文字颜色 */
    color: #c0c0c0;
    /* 下边距 */
    margin-bottom: 12px;
    /* 行高 */
    line-height: 1.8;
    /* 相对定位 */
    position: relative;
}

/* 规章列表中的强调文字 */
.regulation-list strong {
    /* 颜色橙黄色 */
    color: #e8a838;
    /* 字体粗细 */
    font-weight: bold;
}

/* 规章子列表 */
.regulation-list ul {
    /* 列表样式：圆点 */
    list-style: disc;
    /* 左侧内边距 */
    padding-left: 25px;
    /* 上边距 */
    margin-top: 8px;
}

/* 规章子列表项 */
.regulation-list ul li {
    /* 字体大小稍小 */
    font-size: 14px;
    /* 下边距 */
    margin-bottom: 6px;
    /* 颜色稍浅 */
    color: #a0a0a0;
}

/* 战队宗旨引言 */
.intro-box {
    /* 背景色 */
    background: rgba(74, 124, 89, 0.1);
    /* 左边框 */
    border-left: 4px solid #4a7c59;
    /* 内边距 */
    padding: 25px 30px;
    /* 下边距 */
    margin-bottom: 40px;
}

/* 引言标题 */
.intro-title {
    /* 字体大小 */
    font-size: 18px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色军绿色 */
    color: #4a7c59;
    /* 下边距 */
    margin-bottom: 12px;
    /* 字母间距 */
    letter-spacing: 2px;
}

/* 引言内容 */
.intro-content {
    /* 字体大小 */
    font-size: 15px;
    /* 文字颜色 */
    color: #c0c0c0;
    /* 行高 */
    line-height: 2;
}

/* 级别架构表 */
.rank-table {
    /* 宽度100% */
    width: 100%;
    /* 边框合并 */
    border-collapse: collapse;
    /* 上下边距 */
    margin: 20px 0;
}

/* 表格表头 */
.rank-table th {
    /* 背景色 */
    background: #1a1a2e;
    /* 文字颜色 */
    color: #4a7c59;
    /* 内边距 */
    padding: 12px 15px;
    /* 文字左对齐 */
    text-align: left;
    /* 字体粗细 */
    font-weight: bold;
    /* 底部边框 */
    border-bottom: 2px solid #4a7c59;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* 表格单元格 */
.rank-table td {
    /* 内边距 */
    padding: 12px 15px;
    /* 底部边框 */
    border-bottom: 1px solid #2a2a40;
    /* 文字颜色 */
    color: #c0c0c0;
    /* 字体大小 */
    font-size: 14px;
}

/* 表格行悬停效果 */
.rank-table tr:hover td {
    /* 背景色 */
    background: rgba(74, 124, 89, 0.05);
}

/* ========== 招新要求页面样式 ========== */
/* 招新内容容器 */
.recruit-content {
    /* 背景色稍深 */
    background: #222236;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 50px;
    /* 相对定位 */
    position: relative;
    /* 溢出隐藏 */
    overflow: hidden;
}

/* 招新内容顶部装饰条 */
.recruit-content::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离顶部为0 */
    top: 0;
    /* 距离左侧为0 */
    left: 0;
    /* 宽度100% */
    width: 100%;
    /* 高度4px */
    height: 4px;
    /* 背景渐变 */
    background: linear-gradient(90deg, #4a7c59, #e8a838);
}

/* 招新分类标题 */
.recruit-category {
    /* 字体大小 */
    font-size: 24px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 上边距 */
    margin-top: 40px;
    /* 下边距 */
    margin-bottom: 20px;
    /* 字母间距 */
    letter-spacing: 2px;
    /* 相对定位 */
    position: relative;
    /* 左侧内边距 */
    padding-left: 20px;
}

/* 第一个分类标题去掉上边距 */
.recruit-category:first-child {
    /* 上边距为0 */
    margin-top: 0;
}

/* 分类标题左侧装饰条 */
.recruit-category::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离左侧为0 */
    left: 0;
    /* 距离顶部50% */
    top: 50%;
    /* 宽度5px */
    width: 5px;
    /* 高度24px */
    height: 24px;
    /* 背景色橙黄色 */
    background: #e8a838;
    /* 垂直居中 */
    transform: translateY(-50%);
}

/* 招新列表 */
.recruit-list {
    /* 列表样式：十进制 */
    list-style: decimal;
    /* 左侧内边距 */
    padding-left: 30px;
    /* 下边距 */
    margin-bottom: 10px;
}

/* 招新列表项 */
.recruit-list li {
    /* 字体大小 */
    font-size: 15px;
    /* 文字颜色 */
    color: #c0c0c0;
    /* 下边距 */
    margin-bottom: 12px;
    /* 行高 */
    line-height: 1.8;
    /* 相对定位 */
    position: relative;
}

/* 招新列表中的强调文字 */
.recruit-list strong {
    /* 颜色橙黄色 */
    color: #e8a838;
    /* 字体粗细 */
    font-weight: bold;
}

/* 招新子列表 */
.recruit-list ul {
    /* 列表样式：圆点 */
    list-style: disc;
    /* 左侧内边距 */
    padding-left: 25px;
    /* 上边距 */
    margin-top: 8px;
}

/* 招新子列表项 */
.recruit-list ul li {
    /* 字体大小稍小 */
    font-size: 14px;
    /* 下边距 */
    margin-bottom: 6px;
    /* 颜色稍浅 */
    color: #a0a0a0;
}

/* 流程步骤卡片容器 */
.steps-container {
    /* CSS网格布局 */
    display: grid;
    /* 四列等宽 */
    grid-template-columns: repeat(4, 1fr);
    /* 卡片间距 */
    gap: 20px;
    /* 上下边距 */
    margin: 30px 0;
}

/* 步骤卡片 */
.step-card {
    /* 背景色深色 */
    background: #1a1a2e;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 30px 20px;
    /* 文字居中 */
    text-align: center;
    /* 相对定位 */
    position: relative;
    /* 过渡动画 */
    transition: all 0.3s ease;
}

/* 步骤卡片悬停效果 */
.step-card:hover {
    /* 边框变色 */
    border-color: #4a7c59;
    /* 向上移动2px */
    transform: translateY(-2px);
}

/* 步骤编号 */
.step-number {
    /* 字体大小 */
    font-size: 48px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色军绿色 */
    color: #4a7c59;
    /* 透明度 */
    opacity: 0.3;
    /* 下边距 */
    margin-bottom: 10px;
    /* 行高 */
    line-height: 1;
}

/* 步骤标题 */
.step-title {
    /* 字体大小 */
    font-size: 16px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 下边距 */
    margin-bottom: 8px;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* 步骤描述 */
.step-desc {
    /* 字体大小 */
    font-size: 13px;
    /* 文字颜色 */
    color: #888;
    /* 行高 */
    line-height: 1.6;
}

/* 报名方式卡片 */
.contact-card {
    /* 背景色深色 */
    background: #1a1a2e;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 30px;
    /* 上下边距 */
    margin: 20px 0;
}

/* 联系方式行 */
.contact-row {
    /* flex布局 */
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 内边距上下 */
    padding: 15px 0;
    /* 底部边框虚线 */
    border-bottom: 1px dashed #2a2a40;
}

/* 最后一行去掉边框 */
.contact-row:last-child {
    /* 底部边框无 */
    border-bottom: none;
}

/* 联系方式标签 */
.contact-label {
    /* 宽度120px */
    width: 120px;
    /* 字体粗细 */
    font-weight: bold;
    /* 文字颜色军绿色 */
    color: #4a7c59;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* 联系方式值 */
.contact-value {
    /* 文字颜色 */
    color: #e0e0e0;
    /* flex 1 */
    flex: 1;
}

/* 按钮样式 */
.btn {
    /* 内边距 */
    padding: 16px 50px;
    /* 字体大小 */
    font-size: 16px;
    /* 字体粗细 */
    font-weight: bold;
    /* 文字转换大写 */
    text-transform: uppercase;
    /* 字母间距 */
    letter-spacing: 3px;
    /* 去除下划线 */
    text-decoration: none;
    /* 边框样式 */
    border: 2px solid;
    /* 鼠标指针 */
    cursor: pointer;
    /* 过渡动画 */
    transition: all 0.3s ease;
    /* 相对定位 */
    position: relative;
    /* 行内块级元素 */
    display: inline-block;
    /* 文字居中 */
    text-align: center;
}

/* 主要按钮样式 */
.btn-primary {
    /* 背景色军绿色 */
    background: #4a7c59;
    /* 边框色军绿色 */
    border-color: #4a7c59;
    /* 文字颜色白色 */
    color: #ffffff;
}

/* 主要按钮悬停效果 */
.btn-primary:hover {
    /* 背景变深 */
    background: #3d6649;
    /* 边框变深 */
    border-color: #3d6649;
    /* 向上移动2px */
    transform: translateY(-2px);
    /* 添加阴影 */
    box-shadow: 0 5px 20px rgba(74, 124, 89, 0.4);
}

/* 按钮区域 */
.btn-section {
    /* 文字居中 */
    text-align: center;
    /* 上边距 */
    margin-top: 40px;
}

/* ========== 关于我们页面样式 ========== */
/* 关于我们内容区块 */
.about-section {
    /* 背景色稍深 */
    background: #222236;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 50px;
    /* 下边距 */
    margin-bottom: 40px;
    /* 相对定位 */
    position: relative;
    /* 溢出隐藏 */
    overflow: hidden;
}

/* 内容区块顶部装饰条 */
.about-section::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离顶部为0 */
    top: 0;
    /* 距离左侧为0 */
    left: 0;
    /* 宽度100% */
    width: 100%;
    /* 高度4px */
    height: 4px;
    /* 背景渐变 */
    background: linear-gradient(90deg, #4a7c59, #e8a838);
}

/* 分类标题 */
.section-title {
    /* 字体大小 */
    font-size: 26px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 上边距 */
    margin-top: 0;
    /* 下边距 */
    margin-bottom: 30px;
    /* 字母间距 */
    letter-spacing: 2px;
    /* 相对定位 */
    position: relative;
    /* 左侧内边距 */
    padding-left: 20px;
}

/* 分类标题左侧装饰条 */
.section-title::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离左侧为0 */
    left: 0;
    /* 距离顶部50% */
    top: 50%;
    /* 宽度5px */
    width: 5px;
    /* 高度28px */
    height: 28px;
    /* 背景色橙黄色 */
    background: #e8a838;
    /* 垂直居中 */
    transform: translateY(-50%);
}

/* 段落文本 */
.section-text {
    /* 字体大小 */
    font-size: 15px;
    /* 文字颜色 */
    color: #c0c0c0;
    /* 行高 */
    line-height: 2;
    /* 下边距 */
    margin-bottom: 15px;
    /* 首行缩进 */
    text-indent: 2em;
}

/* 最后一段去掉下边距 */
.section-text:last-child {
    /* 下边距为0 */
    margin-bottom: 0;
}

/* 强调文字 */
.section-text strong {
    /* 颜色橙黄色 */
    color: #e8a838;
    /* 字体粗细 */
    font-weight: bold;
}

/* 战队理念卡片容器 */
.vision-cards {
    /* CSS网格布局 */
    display: grid;
    /* 三列等宽 */
    grid-template-columns: repeat(3, 1fr);
    /* 卡片间距 */
    gap: 25px;
    /* 上边距 */
    margin-top: 30px;
}

/* 理念卡片 */
.vision-card {
    /* 背景色深色 */
    background: #1a1a2e;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 35px 25px;
    /* 文字居中 */
    text-align: center;
    /* 过渡动画 */
    transition: all 0.3s ease;
    /* 相对定位 */
    position: relative;
}

/* 理念卡片悬停效果 */
.vision-card:hover {
    /* 边框变色 */
    border-color: #4a7c59;
    /* 向上移动2px */
    transform: translateY(-2px);
    /* 添加阴影 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* 理念图标 */
.vision-icon {
    /* 字体大小 */
    font-size: 48px;
    /* 下边距 */
    margin-bottom: 20px;
    /* 行高 */
    line-height: 1;
}

/* 理念标题 */
.vision-title {
    /* 字体大小 */
    font-size: 18px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 下边距 */
    margin-bottom: 12px;
    /* 字母间距 */
    letter-spacing: 2px;
}

/* 理念描述 */
.vision-desc {
    /* 字体大小 */
    font-size: 14px;
    /* 文字颜色 */
    color: #888;
    /* 行高 */
    line-height: 1.8;
}

/* 发展历程时间线 */
.timeline {
    /* 相对定位 */
    position: relative;
    /* 上下边距 */
    margin: 30px 0;
    /* 左侧内边距 */
    padding-left: 40px;
}

/* 时间线中轴线 */
.timeline::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离左侧15px */
    left: 15px;
    /* 距离顶部为0 */
    top: 0;
    /* 宽度2px */
    width: 2px;
    /* 高度100% */
    height: 100%;
    /* 背景色 */
    background: #2a2a40;
}

/* 时间线项目 */
.timeline-item {
    /* 相对定位 */
    position: relative;
    /* 下边距 */
    margin-bottom: 35px;
}

/* 最后一个项目去掉下边距 */
.timeline-item:last-child {
    /* 下边距为0 */
    margin-bottom: 0;
}

/* 时间线节点圆点 */
.timeline-dot {
    /* 绝对定位 */
    position: absolute;
    /* 距离左侧-33px */
    left: -33px;
    /* 距离顶部5px */
    top: 5px;
    /* 宽度16px */
    width: 16px;
    /* 高度16px */
    height: 16px;
    /* 背景色军绿色 */
    background: #4a7c59;
    /* 边框 */
    border: 3px solid #1a1a2e;
    /* 圆角50% */
    border-radius: 50%;
    /* z-index */
    z-index: 2;
}

/* 时间线年份 */
.timeline-year {
    /* 字体大小 */
    font-size: 18px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色橙黄色 */
    color: #e8a838;
    /* 下边距 */
    margin-bottom: 8px;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* 时间线标题 */
.timeline-title {
    /* 字体大小 */
    font-size: 16px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 下边距 */
    margin-bottom: 8px;
}

/* 时间线描述 */
.timeline-desc {
    /* 字体大小 */
    font-size: 14px;
    /* 文字颜色 */
    color: #a0a0a0;
    /* 行高 */
    line-height: 1.8;
}

/* 团队架构容器 */
.team-structure {
    /* 上边距 */
    margin-top: 30px;
}

/* 架构层级 */
.structure-level {
    /* 下边距 */
    margin-bottom: 30px;
}

/* 最后一层去掉下边距 */
.structure-level:last-child {
    /* 下边距为0 */
    margin-bottom: 0;
}

/* 层级标题 */
.level-title {
    /* 字体大小 */
    font-size: 16px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色军绿色 */
    color: #4a7c59;
    /* 下边距 */
    margin-bottom: 15px;
    /* 字母间距 */
    letter-spacing: 2px;
    /* 相对定位 */
    position: relative;
    /* 左侧内边距 */
    padding-left: 15px;
}

/* 层级标题装饰点 */
.level-title::before {
    /* 内容为空 */
    content: '';
    /* 绝对定位 */
    position: absolute;
    /* 距离左侧为0 */
    left: 0;
    /* 距离顶部50% */
    top: 50%;
    /* 宽度8px */
    width: 8px;
    /* 高度8px */
    height: 8px;
    /* 背景色橙黄色 */
    background: #e8a838;
    /* 垂直居中 */
    transform: translateY(-50%);
}

/* 架构卡片容器 */
.structure-cards {
    /* CSS网格布局 */
    display: grid;
    /* 自动填充，最小宽度200px */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* 卡片间距 */
    gap: 15px;
}

/* 架构卡片 */
.structure-card {
    /* 背景色深色 */
    background: #1a1a2e;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 20px 15px;
    /* 文字居中 */
    text-align: center;
    /* 过渡动画 */
    transition: all 0.3s ease;
}

/* 架构卡片悬停效果 */
.structure-card:hover {
    /* 边框变色 */
    border-color: #e8a838;
    /* 向上移动2px */
    transform: translateY(-2px);
}

/* 职位名称 */
.position-name {
    /* 字体大小 */
    font-size: 15px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色白色 */
    color: #ffffff;
    /* 下边距 */
    margin-bottom: 8px;
}

/* 职位职责 */
.position-desc {
    /* 字体大小 */
    font-size: 12px;
    /* 文字颜色 */
    color: #888;
    /* 行高 */
    line-height: 1.6;
}

/* 数据统计区域 */
.stats-section {
    /* CSS网格布局 */
    display: grid;
    /* 四列等宽 */
    grid-template-columns: repeat(4, 1fr);
    /* 卡片间距 */
    gap: 20px;
    /* 上下边距 */
    margin: 30px 0;
}

/* 统计卡片 */
.stat-card {
    /* 背景色深色 */
    background: #1a1a2e;
    /* 边框 */
    border: 1px solid #2a2a40;
    /* 内边距 */
    padding: 30px 20px;
    /* 文字居中 */
    text-align: center;
    /* 过渡动画 */
    transition: all 0.3s ease;
}

/* 统计卡片悬停效果 */
.stat-card:hover {
    /* 边框变色 */
    border-color: #4a7c59;
    /* 向上移动2px */
    transform: translateY(-2px);
}

/* 统计数字 */
.stat-number {
    /* 字体大小 */
    font-size: 36px;
    /* 字体加粗 */
    font-weight: bold;
    /* 文字颜色军绿色 */
    color: #4a7c59;
    /* 下边距 */
    margin-bottom: 10px;
    /* 行高 */
    line-height: 1;
}

/* 统计标签 */
.stat-label {
    /* 字体大小 */
    font-size: 14px;
    /* 文字颜色 */
    color: #888;
    /* 字母间距 */
    letter-spacing: 1px;
}

/* ========== 平板端响应式适配 ========== */
@media (max-width: 992px) {
    /* 步骤卡片改为两列 */
    .steps-container {
        /* 两列布局 */
        grid-template-columns: repeat(2, 1fr);
    }

    /* 理念卡片改为两列 */
    .vision-cards {
        /* 两列布局 */
        grid-template-columns: repeat(2, 1fr);
    }

    /* 统计卡片改为两列 */
    .stats-section {
        /* 两列布局 */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== 移动端响应式适配 ========== */
@media (max-width: 768px) {
    /* 规章内容内边距减小 */
    .regulations-content,
    .recruit-content,
    .about-section {
        /* 内边距 */
        padding: 30px 20px;
    }

    /* 分类标题缩小 */
    .regulation-category,
    .recruit-category,
    .section-title {
        /* 字体大小 */
        font-size: 20px;
    }

    /* 步骤卡片改为单列 */
    .steps-container {
        /* 单列布局 */
        grid-template-columns: 1fr;
    }

    /* 联系方式行纵向排列 */
    .contact-row {
        /* 改为纵向排列 */
        flex-direction: column;
        /* 左对齐 */
        align-items: flex-start;
    }

    /* 联系方式标签 */
    .contact-label {
        /* 宽度自动 */
        width: auto;
        /* 下边距 */
        margin-bottom: 5px;
    }

    /* 按钮宽度充满 */
    .btn {
        /* 宽度100% */
        width: 100%;
    }

    /* 理念卡片改为单列 */
    .vision-cards {
        /* 单列布局 */
        grid-template-columns: 1fr;
    }

    /* 统计卡片改为两列 */
    .stats-section {
        /* 两列布局 */
        grid-template-columns: repeat(2, 1fr);
    }

    /* 统计数字缩小 */
    .stat-number {
        /* 字体大小 */
        font-size: 28px;
    }

    /* 时间线左侧内边距减小 */
    .timeline {
        /* 左侧内边距 */
        padding-left: 30px;
    }

    /* 时间线中轴线调整 */
    .timeline::before {
        /* 距离左侧10px */
        left: 10px;
    }

    /* 时间线节点调整 */
    .timeline-dot {
        /* 距离左侧-24px */
        left: -24px;
    }

    /* 架构卡片自动填充最小宽度调整 */
    .structure-cards {
        /* 最小宽度调整 */
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    /* 级别表格水平滚动 */
    .rank-table {
        /* 字体大小 */
        font-size: 13px;
    }
}