.timeline-wrapper {
    margin: 2em 0;
    position: relative;
}

/* 主时间线容器 */
.timeline[data-v-02828a8b] {
    font-size: .9em;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    --timeline-left: 28px;  /* 竖线位置 */
    --dot-size: 8px;        /* 圆点大小 */
}

/* 左侧竖线 - 上端与第一个圆点中心对齐 */
.timeline[data-v-02828a8b]:before {
    background-color: var(--c-bg-soft, #f0f0f0);
    content: "";
    position: absolute;
    left: var(--timeline-left);
    top: calc(0.35em + var(--dot-size) / 2);  /* 与圆点中心对齐 */
    bottom: 0;
    width: 2px;
    border-radius: 1px;
}

/* 时间标题 */
[data-v-02828a8b] .timeline-caption {
    font-size: 1.2em;
    opacity: 0.9;
    position: relative;
    margin-bottom: 0.6em;
    margin-top: 1.5em;
    font-weight: normal;
    padding-left: calc(var(--timeline-left) + 20px);
    line-height: 1.4;
    min-height: calc(var(--dot-size) + 4px);
}

[data-v-02828a8b] .timeline-caption:first-child {
    margin-top: 0;
}

/* 圆点 */
[data-v-02828a8b] .timeline-caption:before {
    background-color: var(--c-text-2, #888);
    border-radius: 50%;
    content: "";
    position: absolute;
    left: calc(var(--timeline-left) + 1px - var(--dot-size) / 2);
    top: 0.35em;
    width: var(--dot-size);
    height: var(--dot-size);
    border: 2px solid var(--c-bg, #ffffff);
    box-shadow: 0 0 0 2px var(--c-bg-soft, #f0f0f0);
    z-index: 2;
}

/* 卡片 */
[data-v-02828a8b] .timeline-body.card {
    margin-bottom: 1.2em;
    margin-left: calc(var(--timeline-left) + 20px);
    position: relative;
    background: var(--c-bg, #ffffff);
    border: 1px solid var(--c-border, #e8e8e8);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    max-width: calc(100% - var(--timeline-left) - 20px - 1em);
    width: fit-content;
    width: -moz-fit-content;
}

/* 卡片内容 */
[data-v-02828a8b] .card-content {
    padding: 1em;
}

[data-v-02828a8b] .card-content p {
    margin: 0.5em 0;
    line-height: 1.7;
    color: var(--c-text, #333);
}

[data-v-02828a8b] .card-content p:first-child {
    margin-top: 0;
}

[data-v-02828a8b] .card-content p:last-child {
    margin-bottom: 0px;
}

/* ===========================================
   亮色模式变量（默认）
   =========================================== */
:root {
    --c-bg-soft: #f0f0f0;
    --c-text-2: #888;
    --c-bg: #ffffff;
    --c-border: #e8e8e8;
    --c-text: #333;
    --c-border-hover: #d0d0d0;
}

/* ===========================================
   暗色模式 - 跟随主题 data-theme="dark"
   =========================================== */
html[data-theme="dark"] {
    --c-bg-soft: #3a3a3a;
    --c-text-2: #999;
    --c-bg: #2a2a2a;
    --c-border: #404040;
    --c-text: #e0e0e0;
    --c-border-hover: #555;
}

html[data-theme="dark"] [data-v-02828a8b] .timeline-caption:before {
    border-color: var(--c-bg);
    box-shadow: 0 0 0 2px var(--c-bg-soft);
}

/* 兼容 .dark 类 */
html.dark {
    --c-bg-soft: #3a3a3a;
    --c-text-2: #999;
    --c-bg: #2a2a2a;
    --c-border: #404040;
    --c-text: #e0e0e0;
    --c-border-hover: #555;
}

html.dark [data-v-02828a8b] .timeline-caption:before {
    border-color: var(--c-bg);
    box-shadow: 0 0 0 2px var(--c-bg-soft);
}

/* ===========================================
   响应式样式
   =========================================== */

/* 平板 */
@media screen and (max-width: 768px) {
    .timeline[data-v-02828a8b] {
        --timeline-left: 24px;
        --dot-size: 7px;
    }
    
    .timeline[data-v-02828a8b]:before {
        top: calc(0.4em + var(--dot-size) / 2);
    }
    
    [data-v-02828a8b] .timeline-caption {
        font-size: 1.1em;
    }
    
    [data-v-02828a8b] .timeline-caption:before {
        top: 0.4em;
    }
}

/* 手机 */
@media screen and (max-width: 480px) {
    .timeline[data-v-02828a8b] {
        --timeline-left: 20px;
        --dot-size: 6px;
    }
    
    .timeline[data-v-02828a8b]:before {
        top: calc(0.45em + var(--dot-size) / 2);
    }
    
    [data-v-02828a8b] .timeline-caption {
        font-size: 1em;
    }
    
    [data-v-02828a8b] .timeline-caption:before {
        top: 0.45em;
    }
}

/* 大屏显示器优化 */
@media screen and (min-width: 1200px) {
    .timeline[data-v-02828a8b] {
        --timeline-left: 32px;
        --dot-size: 9px;
    }
    
    .timeline[data-v-02828a8b]:before {
        top: calc(0.35em + var(--dot-size) / 2);
    }
}

/* 盒模型隔离 */
.timeline-wrapper * {
    box-sizing: border-box;
}