/* ========================================
   时间轴颜色和位置修复 - 彩虹七色
======================================== */

/* 添加缺失的年份颜色类 */
.year-yellow { color: #ffa502; }
.year-cyan { color: #00a8ff; }

/* 更新时间轴圆点颜色 - 彩虹七色 */
.timeline-dot-horizontal.dot-orange { background-color: #ff6b35; }
.timeline-dot-horizontal.dot-red { background-color: #ff4757; }
.timeline-dot-horizontal.dot-yellow { background-color: #ffa502; }
.timeline-dot-horizontal.dot-green { background-color: #2ed573; }
.timeline-dot-horizontal.dot-cyan { background-color: #00a8ff; }
.timeline-dot-horizontal.dot-blue { background-color: #3742fa; }
.timeline-dot-horizontal.dot-purple { background-color: #8c7ae6; }

/* 修复时间轴SVG路径 - 确保连续不断开 */
.timeline-curved-line {
    width: 100% !important;
    height: 20px !important;
    overflow: visible !important;
}

.timeline-curved-line path {
    vector-effect: non-scaling-stroke;
    stroke-dasharray: none !important; /* 移除虚线效果避免断开 */
    stroke-dashoffset: 0 !important;
    animation: none !important; /* 移除可能导致断开的动画 */
}

/* 调整时间点位置 - 让点准确落在曲线上 */
.timeline-dot-horizontal:nth-child(1) { transform: translateY(-1px); }
.timeline-dot-horizontal:nth-child(2) { transform: translateY(-4px); }
.timeline-dot-horizontal:nth-child(3) { transform: translateY(-7px); }
.timeline-dot-horizontal:nth-child(4) { transform: translateY(-4px); }
.timeline-dot-horizontal:nth-child(5) { transform: translateY(-1px); }
.timeline-dot-horizontal:nth-child(6) { transform: translateY(-3px); }
.timeline-dot-horizontal:nth-child(7) { transform: translateY(-1px); }

/* 矩形卡片背景改为白色，只保留彩色边框 */
.timeline-card-rect {
    background: white !important;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 卡片主题样式 - 白色背景 + 彩色边框 */
.card-theme-orange {
    background: white !important;
    border: 2px solid #ff6b35 !important;
    border-left: 4px solid #ff6b35 !important;
}

.card-theme-red {
    background: white !important;
    border: 2px solid #ff4757 !important;
    border-left: 4px solid #ff4757 !important;
}

.card-theme-yellow {
    background: white !important;
    border: 2px solid #ffa502 !important;
    border-left: 4px solid #ffa502 !important;
}

.card-theme-green {
    background: white !important;
    border: 2px solid #2ed573 !important;
    border-left: 4px solid #2ed573 !important;
}

.card-theme-cyan {
    background: white !important;
    border: 2px solid #00a8ff !important;
    border-left: 4px solid #00a8ff !important;
}

.card-theme-blue {
    background: white !important;
    border: 2px solid #3742fa !important;
    border-left: 4px solid #3742fa !important;
}

.card-theme-purple {
    background: white !important;
    border: 2px solid #8c7ae6 !important;
    border-left: 4px solid #8c7ae6 !important;
}

/* 卡片图标样式增强 - 添加圆形渐变背景 */
.timeline-card-rect .card-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-card-rect .card-icon i {
    font-size: 24px;
    color: white !important;
    z-index: 2;
    position: relative;
}

/* 各主题卡片的渐变背景 */
.card-theme-orange .card-icon {
    background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 50%, #ffa726 100%);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.card-theme-red .card-icon {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 50%, #ff8a95 100%);
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
}

.card-theme-yellow .card-icon {
    background: linear-gradient(135deg, #ffa502 0%, #ffb142 50%, #ffc947 100%);
    box-shadow: 0 4px 15px rgba(255, 165, 2, 0.3);
}

.card-theme-green .card-icon {
    background: linear-gradient(135deg, #2ed573 0%, #54d688 50%, #7dd87f 100%);
    box-shadow: 0 4px 15px rgba(46, 213, 115, 0.3);
}

.card-theme-cyan .card-icon {
    background: linear-gradient(135deg, #00a8ff 0%, #32b5ff 50%, #54c7ff 100%);
    box-shadow: 0 4px 15px rgba(0, 168, 255, 0.3);
}

.card-theme-blue .card-icon {
    background: linear-gradient(135deg, #3742fa 0%, #5a67fb 50%, #7c88fc 100%);
    box-shadow: 0 4px 15px rgba(55, 66, 250, 0.3);
}

.card-theme-purple .card-icon {
    background: linear-gradient(135deg, #8c7ae6 0%, #a29bea 50%, #b8b0ee 100%);
    box-shadow: 0 4px 15px rgba(140, 122, 230, 0.3);
}

/* 悬停效果增强 */
.timeline-card-rect:hover .card-icon {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-theme-orange:hover .card-icon {
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}

.card-theme-red:hover .card-icon {
    box-shadow: 0 8px 25px rgba(255, 71, 87, 0.4);
}

.card-theme-yellow:hover .card-icon {
    box-shadow: 0 8px 25px rgba(255, 165, 2, 0.4);
}

.card-theme-green:hover .card-icon {
    box-shadow: 0 8px 25px rgba(46, 213, 115, 0.4);
}

.card-theme-cyan:hover .card-icon {
    box-shadow: 0 8px 25px rgba(0, 168, 255, 0.4);
}

.card-theme-blue:hover .card-icon {
    box-shadow: 0 8px 25px rgba(55, 66, 250, 0.4);
}

.card-theme-purple:hover .card-icon {
    box-shadow: 0 8px 25px rgba(140, 122, 230, 0.4);
}

/* 卡片标签颜色匹配 - 浅色背景 */
.card-theme-orange .card-tags span {
    background: rgba(255, 107, 53, 0.1);
    color: #ff6b35;
    border: 1px solid rgba(255, 107, 53, 0.3);
}

.card-theme-red .card-tags span {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.3);
}

.card-theme-yellow .card-tags span {
    background: rgba(255, 165, 2, 0.1);
    color: #ffa502;
    border: 1px solid rgba(255, 165, 2, 0.3);
}

.card-theme-green .card-tags span {
    background: rgba(46, 213, 115, 0.1);
    color: #2ed573;
    border: 1px solid rgba(46, 213, 115, 0.3);
}

.card-theme-cyan .card-tags span {
    background: rgba(0, 168, 255, 0.1);
    color: #00a8ff;
    border: 1px solid rgba(0, 168, 255, 0.3);
}

.card-theme-blue .card-tags span {
    background: rgba(55, 66, 250, 0.1);
    color: #3742fa;
    border: 1px solid rgba(55, 66, 250, 0.3);
}

.card-theme-purple .card-tags span {
    background: rgba(140, 122, 230, 0.1);
    color: #8c7ae6;
    border: 1px solid rgba(140, 122, 230, 0.3);
}

/* 卡片文字颜色 */
.timeline-card-rect h3 {
    color: #333 !important;
}

.timeline-card-rect p {
    color: #666 !important;
}

/* 确保时间点可见 */
.timeline-dot-horizontal {
    opacity: 1 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 圆点悬停效果增强 */
.timeline-dot-horizontal:hover {
    transform: translateY(-1px) scale(1.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 3;
}

/* 响应式调整 - 移动端时间点位置 */
@media (max-width: 768px) {
    .timeline-dot-horizontal:nth-child(1) { transform: translateY(0px); }
    .timeline-dot-horizontal:nth-child(2) { transform: translateY(-2px); }
    .timeline-dot-horizontal:nth-child(3) { transform: translateY(-4px); }
    .timeline-dot-horizontal:nth-child(4) { transform: translateY(-2px); }
    .timeline-dot-horizontal:nth-child(5) { transform: translateY(0px); }
    .timeline-dot-horizontal:nth-child(6) { transform: translateY(-1px); }
    .timeline-dot-horizontal:nth-child(7) { transform: translateY(0px); }
}

/* 时间轴容器确保完整显示 */
.timeline-line-container {
    overflow: visible;
    position: relative;
}

/* 确保SVG完整渲染 */
.timeline-curved-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    height: 20px;
    transform: translateY(-50%);
    overflow: visible;
    z-index: 1;
}