.timeline-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:32px;padding:16px 20px;background:linear-gradient(135deg, #f8fafc, #fff);border-radius:20px;border:1px solid var(--gray-200)}.toolbar-left,.toolbar-right{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.btn-outline{background:transparent;border:1px solid var(--gray-300);padding:10px 20px;border-radius:40px;font-weight:500;cursor:pointer;transition:all 0.3s;display:inline-flex;align-items:center;gap:8px}.btn-outline:hover{background:var(--gray-100);border-color:var(--primary-color);color:var(--primary-color)}.layout-switch{display:flex;gap:8px;background:var(--gray-100);border-radius:60px;padding:4px}.layout-btn{background:transparent;border:none;padding:8px 20px;border-radius:40px;cursor:pointer;transition:all 0.3s;font-size:0.85rem;font-weight:500}.layout-btn.active{background:var(--primary-color);color:white;box-shadow:0 2px 8px rgba(59,130,246,0.3)}.theme-switch{display:flex;align-items:center;gap:8px}.theme-switch select{padding:8px 16px;border:1px solid var(--gray-300);border-radius:40px;background:white;cursor:pointer}.timeline-container{min-height:500px;background:white;border-radius:24px;padding:32px;border:1px solid var(--gray-200);overflow-x:auto}.timeline-vertical{position:relative;padding-left:30px}.timeline-vertical::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:3px;background:linear-gradient(180deg, #3b82f6, #8b5cf6, #ec4899);border-radius:3px}.timeline-item{position:relative;margin-bottom:40px;display:flex;gap:20px}.timeline-icon{position:relative;z-index:1;width:48px;height:48px;background:white;border:3px solid;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 4px 12px rgba(0,0,0,0.1);transition:all 0.3s}.timeline-item:hover .timeline-icon{transform:scale(1.1);box-shadow:0 8px 20px rgba(0,0,0,0.15)}.timeline-content{flex:1;background:var(--gray-50);border-radius:20px;padding:20px;transition:all 0.3s;border:1px solid transparent}.timeline-item:hover .timeline-content{border-color:var(--primary-color);box-shadow:0 8px 25px rgba(0,0,0,0.08);transform:translateX(6px)}.timeline-date{display:inline-block;font-size:0.75rem;font-weight:600;color:white;padding:4px 12px;border-radius:30px;margin-bottom:12px}.timeline-title{font-size:1.2rem;font-weight:700;margin-bottom:10px;color:var(--gray-800)}.timeline-desc{font-size:0.85rem;color:var(--gray-600);line-height:1.6}.timeline-actions{margin-top:12px;display:flex;gap:12px}.timeline-actions button{background:transparent;border:none;padding:4px 8px;cursor:pointer;color:var(--gray-500);font-size:0.7rem;border-radius:6px;transition:all 0.2s}.timeline-actions button:hover{background:var(--gray-200);color:var(--primary-color)}.timeline-horizontal{display:flex;overflow-x:auto;padding:20px 0;gap:30px}.timeline-horizontal .timeline-item{flex-direction:column;min-width:280px;margin-bottom:0;position:relative}.timeline-horizontal .timeline-icon{margin:0 auto 16px}.timeline-horizontal .timeline-content{text-align:center}.timeline-horizontal .timeline-actions{justify-content:center}.theme-blue .timeline-vertical::before{background:linear-gradient(180deg, #3b82f6, #1d4ed8)}.theme-blue .timeline-date{background:#3b82f6}.theme-blue .timeline-icon{border-color:#3b82f6;color:#3b82f6}.theme-green .timeline-vertical::before{background:linear-gradient(180deg, #10b981, #059669)}.theme-green .timeline-date{background:#10b981}.theme-green .timeline-icon{border-color:#10b981;color:#10b981}.theme-purple .timeline-vertical::before{background:linear-gradient(180deg, #8b5cf6, #6d28d9)}.theme-purple .timeline-date{background:#8b5cf6}.theme-purple .timeline-icon{border-color:#8b5cf6;color:#8b5cf6}.theme-orange .timeline-vertical::before{background:linear-gradient(180deg, #f97316, #ea580c)}.theme-orange .timeline-date{background:#f97316}.theme-orange .timeline-icon{border-color:#f97316;color:#f97316}.theme-dark .timeline-container{background:#1e1e2e}.theme-dark .timeline-content{background:#2d2d44;color:#e0e0e0}.theme-dark .timeline-title{color:#ffffff}.theme-dark .timeline-desc{color:#a0a0c0}.theme-dark .timeline-vertical::before{background:linear-gradient(180deg, #667eea, #764ba2)}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn 0.3s ease}.modal-content{background:white;border-radius:28px;width:90%;max-width:500px;max-height:85vh;overflow-y:auto;animation:slideUp 0.3s ease}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--gray-200)}.modal-header h3{font-size:1.2rem;font-weight:600}.modal-close{background:transparent;border:none;font-size:1.5rem;cursor:pointer;color:var(--gray-400)}.modal-body{padding:24px}.form-group{margin-bottom:20px}.form-group label{display:flex;align-items:center;gap:6px;font-size:0.85rem;font-weight:500;margin-bottom:8px;color:var(--gray-700)}.form-control{width:100%;padding:12px 16px;border:1px solid var(--gray-300);border-radius:16px;font-size:0.9rem;transition:all 0.3s}.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.color-picker{width:50px;height:40px;border:1px solid var(--gray-300);border-radius:12px;cursor:pointer}.icon-selector{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}.icon-option{width:44px;height:44px;background:var(--gray-100);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;transition:all 0.2s;border:2px solid transparent}.icon-option:hover{background:var(--gray-200);transform:scale(1.05)}.icon-option.selected{border-color:var(--primary-color);background:#e0e7ff}.modal-footer{display:flex;gap:12px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--gray-200)}.empty-timeline{text-align:center;padding:60px;color:var(--gray-400)}.empty-timeline i{font-size:4rem;margin-bottom:16px}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.timeline-toolbar{flex-direction:column;align-items:stretch}.toolbar-left,.toolbar-right{justify-content:center}.timeline-vertical{padding-left:20px}.timeline-vertical::before{left:10px}.timeline-icon{width:36px;height:36px;font-size:0.9rem}.timeline-content{padding:14px}.timeline-title{font-size:1rem}}.theme-default .timeline-vertical::before{background:linear-gradient(180deg, #3b82f6, #8b5cf6, #ec4899) !important}.theme-blue .timeline-vertical::before{background:linear-gradient(180deg, #3b82f6, #2563eb, #1d4ed8) !important}.theme-blue .timeline-date{background:#3b82f6 !important}.theme-blue .timeline-icon{border-color:#3b82f6 !important;color:#3b82f6 !important}.theme-blue .timeline-content{border-left-color:#3b82f6 !important}.theme-green .timeline-vertical::before{background:linear-gradient(180deg, #10b981, #059669, #047857) !important}.theme-green .timeline-date{background:#10b981 !important}.theme-green .timeline-icon{border-color:#10b981 !important;color:#10b981 !important}.theme-green .timeline-content{border-left-color:#10b981 !important}.theme-purple .timeline-vertical::before{background:linear-gradient(180deg, #8b5cf6, #7c3aed, #6d28d9) !important}.theme-purple .timeline-date{background:#8b5cf6 !important}.theme-purple .timeline-icon{border-color:#8b5cf6 !important;color:#8b5cf6 !important}.theme-purple .timeline-content{border-left-color:#8b5cf6 !important}.theme-orange .timeline-vertical::before{background:linear-gradient(180deg, #f97316, #ea580c, #c2410c) !important}.theme-orange .timeline-date{background:#f97316 !important}.theme-orange .timeline-icon{border-color:#f97316 !important;color:#f97316 !important}.theme-orange .timeline-content{border-left-color:#f97316 !important}.theme-dark{background:#1e1e2e !important}.theme-dark .timeline-content{background:#2d2d44 !important}.theme-dark .timeline-content .timeline-title{color:#ffffff !important}.theme-dark .timeline-content .timeline-desc{color:#a0a0c0 !important}.theme-dark .timeline-vertical::before{background:linear-gradient(180deg, #667eea, #764ba2) !important}.theme-dark .timeline-content .timeline-date{background:#3b82f6 !important}