/* 基础样式 */
        :root {
            --bg-dark: #1a1a1a;
            --bg-darker: #121212;
            --bg-card: #242424;
            --text-primary: #EEEEEE;
            --text-secondary: #CCCCCC;
            --border-color: #333;
			--accent-banben: #333333;
            --accent-banben-hover: #CC0000;
            --accent-red: #CC0000;
            --accent-red-hover: #FF0000;
            --success: #4CAF50;
            --warning: #FFC107;
            --danger: #F44336;
            --info: #2196F3;
        }


        /* 主容器 */
        .history-container {
            width: 1200px;
            margin: 0 auto;
            background-color: var(--bg-darker);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        /* 文件头部 */
        .file-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background-color: var(--bg-card);
            border-bottom: 1px solid var(--border-color);
        }

        .file-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .file-icon img {
            width: 50px;
            height: 50px;
        }

        .file-details {
            display: flex;
            flex-direction: column;
        }

        .file-name {

    font-size: 22px;
    color: var(--text-primary);
	position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
        }
		

.version-badge {
    background: #CC0000; 
    color: white;
    padding: 4px 20px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    animation: pulse 2s infinite;
    position: relative;
    top: -2px;
}

/* 可选：添加脉动动画效果 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
        .file-meta {
            display: flex;
            gap: 15px;
            margin-top: 0px;
            font-size: 14px;
            color: var(--text-secondary);
        }

        /* 下载按钮 */
        .download-btn {
            background-color: var(--accent-red);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .download-btn:hover {
            background-color: var(--accent-red-hover);
        }
		
.jiaocheng-btn {
    background-color: var(--accent-banben);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none; /* 明确禁用文本装饰 */
    display: inline-block; /* 如果是内联元素确保正确显示 */
}

        .jiaocheng-btn:hover {
            background-color: var(--accent-banben-hover);
        }

        /* 控制栏 */
        .controls-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: var(--bg-card);
            border-bottom: 1px solid var(--border-color);
        }

        .view-controls {
            display: flex;
            gap: 10px;
        }

        .control-btn {
            background-color: transparent;
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 13px;
        }

        .control-btn:hover {
            background-color: rgba(255, 255, 255, 0.05);
            border-color: var(--accent-red);
        }

        .control-btn.active {
            background-color: var(--accent-red);
            color: white;
            border-color: var(--accent-red);
        }

        .pagination {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .page-info {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .page-btn {
            background-color: transparent;
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            width: 30px;
            height: 30px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .page-btn:hover {
            background-color: rgba(255, 255, 255, 0.05);
            border-color: var(--accent-red);
        }

        .page-btn.active {
            background-color: var(--accent-red);
            color: white;
            border-color: var(--accent-red);
        }

        .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* 合并版本列表 */
        .version-log-container {
            padding: 20px;
        }

        .version-log-title {
            font-size: 18px;
            margin: 0 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--accent-red);
            display: flex;
            align-items: center;
        }

        .version-log-title svg {
            margin-right: 10px;
            stroke: var(--accent-red);
        }

        .version-log-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .version-log-item {
            background-color: var(--bg-card);
            border-radius: 6px;
            overflow: hidden;
            transition: all 0.2s;
        }

        .version-log-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .version-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background-color: rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }

        .version-header.active {
            background-color: var(--accent-banben);
        }

        .version-meta {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .version-number {
            font-weight: bold;
            font-size: 16px;
        }

        .version-date {
            font-size: 14px;
            color: var(--text-secondary);
        }

        .version-header.active .version-date {
            color: rgba(255, 255, 255, 0.8);
        }

        .version-downloads {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .version-header.active .version-downloads {
            color: rgba(255, 255, 255, 0.8);
        }

        .version-toggle {
            width: 20px;
            height: 20px;
            position: relative;
        }

        .version-toggle::before,
        .version-toggle::after {
            content: '';
            position: absolute;
            background-color: var(--text-primary);
            transition: all 0.3s;
        }

        .version-toggle::before {
            width: 14px;
            height: 2px;
            left: 3px;
            top: 9px;
        }

        .version-toggle::after {
            width: 2px;
            height: 14px;
            left: 9px;
            top: 3px;
        }

        .version-header.active .version-toggle::after {
            transform: rotate(90deg);
            opacity: 0;
        }

        .version-header.active .version-toggle::before,
        .version-header.active .version-toggle::after {
            background-color: white;
        }

        .version-content {
            padding: 0;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .version-content.active {
            max-height: 1000px;
            padding: 15px;
        }

        .version-download {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px dashed var(--border-color);
        }

        .download-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .download-icon {
            width: 24px;
            height: 24px;
        }

        .download-btn.small {
            background-color: var(--accent-red);
            color: white;
            border: none;
            padding: 5px 15px;
            margin-left:10px ;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            transition: background-color 0.2s;
            letter-spacing: 3px;
        }

        .download-btn.small:hover {
            background-color: var(--accent-red-hover);
        }

        .version-changes {
            margin: 15px 0 0 0;
            padding: 0;
            list-style: none;
        }

        .change-item {
            display: flex;
            margin-bottom: 10px;
            font-size: 14px;
        }

        .change-type {
            display: inline-block;
            min-width: 50px;
            padding: 2px 8px;
            margin-right: 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            text-transform: uppercase;
        }

        .change-type.new {
            background-color: rgba(76, 175, 80, 0.2);
            color: var(--success);
        }

        .change-type.improved {
            background-color: rgba(33, 150, 243, 0.2);
            color: var(--info);
        }

        .change-type.fixed {
            background-color: rgba(244, 67, 54, 0.2);
            color: var(--danger);
        }

        .change-type.custom {
            background-color: rgba(255, 235, 59, 0.2);
            color: var(--warning);
        }

        /* 评论区域 */
        .comments-section {
            margin-top: 30px;
            padding: 20px;
            border-top: 1px solid var(--border-color);
        }

        .comments-title {
            font-size: 18px;
            margin: 0 0 20px 0;
            display: flex;
            align-items: center;
        }

        .comments-title svg {
            margin-right: 10px;
            stroke: var(--accent-red);
        }

        .comment-form {
            background-color: var(--bg-card);
            padding: 20px;
            border-radius: 6px;
            margin-bottom: 20px;
        }

        .comment-input {
            width: 98%;
            min-height: 100px;
            padding: 12px;
            background-color: var(--bg-dark);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 14px;
            resize: vertical;
            margin-bottom: 10px;
        }

        .comment-submit {
            display: flex;
            justify-content: flex-end;
        }

        .comment-submit-btn {
            background-color: var(--accent-red);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .comment-submit-btn:hover {
            background-color: var(--accent-red-hover);
        }

        .comment-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .comment-item {
            background-color: var(--bg-card);
            padding: 15px;
            border-radius: 6px;
        }

        .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .comment-user {
            font-weight: bold;
            color: var(--accent-red);
        }

        .comment-date {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .comment-text {
            line-height: 1.6;
        }

        /* 响应式设计 */
        @media (max-width: 1240px) {
            .history-container {
                width: 95%;
            }
        }

        @media (max-width: 768px) {
            .file-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .controls-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .version-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
            
            .version-download {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }