/* ========================================
   迭代页面专属样式
   ======================================== */
.versions-header {
    margin-bottom: var(--spacing-4xl);
}

.page-desc {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ========================================
   版本时间线
   ======================================== */
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--color-border);
}

/* ========================================
   单个版本项
   ======================================== */
.version-item {
    position: relative;
    padding-bottom: var(--spacing-3xl);
}

.version-item:last-child {
    padding-bottom: 0;
}

/* 版本节点圆点 */
.version-dot {
    position: absolute;
    left: -34px;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-primary);
    border: 2px solid var(--color-bg);
}

/* ========================================
   版本头部：版本号 + 日期
   ======================================== */
.version-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.version-tag {
    padding: var(--spacing-xs) 10px;
    background-color: var(--color-bg-tag);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
}

.version-date {
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
}

/* ========================================
   版本内容卡片
   ======================================== */
.version-content {
    padding: var(--spacing-xl);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
}

.version-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

/* ========================================
   更新类型标签
   ======================================== */
.update-types {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.type-tag {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
}

.type-feature {
    background-color: #E6F4EA;
    color: #1F7536;
}

.type-fix {
    background-color: #FFF2E6;
    color: #B35C00;
}

.type-optimize {
    background-color: #E6F7FF;
    color: #0052CC;
}

.type-style {
    background-color: #F5F1FF;
    color: #5E4DB2;
}

.type-performance {
    background-color: #FFF0F5;
    color: #C71585;
}

.type-security {
    background-color: #F0FFF4;
    color: #006400;
}

.type-api {
    background-color: #F0F8FF;
    color: #4169E1;
}

.type-config {
    background-color: #FFF8DC;
    color: #8B4513;
}

/* ========================================
   更新内容列表
   ======================================== */
.update-list {
    list-style-position: inside;
    padding-left: 0;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.update-list li {
    margin-bottom: var(--spacing-sm);
}

.update-list li:last-child {
    margin-bottom: 0;
}

/* ========================================
   响应式设计
   ======================================== */
@media (max-width: var(--breakpoint-tablet)) {
    .timeline {
        padding-left: 20px;
    }
    
    .version-dot {
        left: -24px;
    }
    
    .version-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}