/* 開發日誌專用樣式 - 採用時間軸設計與霓虹發光效果 */
:root { --log-accent: #00d4ff; --log-accent-glow: rgba(0, 212, 255, 0.5); }
.dev-log-container { position: relative; padding: 40px 0; }
.dev-log-container::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: var(--gradient-primary); transform: translateX(-50%); opacity: 0.3; }
.timeline-item { position: relative; margin-bottom: 40px; width: 100%; display: flex; }
.timeline-item-left { justify-content: flex-end; padding-right: calc(50% + 30px); }
.timeline-item-right { justify-content: flex-start; padding-left: calc(50% + 30px); }
.timeline-dot { position: absolute; left: 50%; top: 25px; width: 20px; height: 20px; background: var(--bg-dark); border: 4px solid var(--glow-primary); border-radius: 50%; transform: translateX(-50%); z-index: 10; box-shadow: 0 0 10px var(--glow-primary); transition: all 0.3s; }
.timeline-item:hover .timeline-dot { transform: translateX(-50%) scale(1.3); box-shadow: 0 0 20px var(--glow-primary); background: var(--glow-primary); }
.timeline-content { width: 100%; max-width: 500px; background: var(--bg-card); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: 15px; position: relative; transition: all 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.timeline-item:hover .timeline-content { border-color: var(--glow-primary); transform: translateY(-5px); box-shadow: var(--shadow-glow); }
.timeline-date { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.timeline-date i { color: var(--glow-primary); font-size: 1.2rem; }
.timeline-date span { color: var(--glow-primary); font-weight: bold; font-size: 1.1rem; font-family: 'monospace'; text-shadow: 0 0 10px var(--log-accent-glow); }
.timeline-list { list-style: none; padding: 0; margin: 0; }
.timeline-list-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,0.1); transition: all 0.2s; }
.timeline-list-item:last-child { border-bottom: none; }
.timeline-list-item:hover { background: rgba(255,255,255,0.02); padding-left: 8px; }
.item-number { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; background: var(--gradient-primary); color: #fff; font-weight: bold; font-size: 0.85rem; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px var(--log-accent-glow); }
.item-content { color: var(--text-primary); line-height: 1.6; font-size: 1rem; flex: 1; }
.timeline-item::after { content: ''; position: absolute; top: 33px; width: 30px; height: 2px; background: var(--glow-primary); opacity: 0.5; }
.timeline-item-left::after { right: calc(50% + 10px); }
.timeline-item-right::after { left: calc(50% + 10px); }
@media (max-width: 768px) {
.dev-log-container::before { left: 20px; transform: none; }
.timeline-item { padding-left: 50px !important; padding-right: 15px !important; justify-content: flex-start !important; }
.timeline-dot { left: 20px; transform: none; }
.timeline-item:hover .timeline-dot { transform: scale(1.3); }
.timeline-content { width: 100%; max-width: none; }
.timeline-item::after { left: 20px !important; right: auto !important; width: 30px; }
}