.timeline-generator{min-height:auto;background:linear-gradient(135deg,var(--gray-900) 0%,var(--gray-800) 100%);padding:2rem}.timeline-generator .back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--gray-400);text-decoration:none;font-size:.875rem;margin-bottom:1.5rem;transition:color .2s ease}.timeline-generator .back-link:hover{color:var(--gray-100)}.timeline-generator .tool-header{text-align:center;margin-bottom:2rem}.timeline-generator .tool-header h1{color:var(--gray-100);font-size:2.5rem;font-weight:700;margin:0 0 .5rem}.timeline-generator .tool-header p{color:var(--gray-400);font-size:1.125rem;margin:0}.timeline-generator .generator-layout{display:grid;grid-template-columns:var(--tool-controls-width, 420px) 1fr;gap:var(--tool-content-gap, 2rem);max-width:1600px;margin:0 auto}@media (max-width: 1200px){.timeline-generator .generator-layout{grid-template-columns:1fr}}.timeline-generator .config-panel{display:flex;flex-direction:column;gap:1rem}.timeline-generator .config-section{background:#1e293b80;border:1px solid rgba(148,163,184,.1);border-radius:12px;padding:1.25rem}.timeline-generator .config-section h3{font-size:1.15rem;font-weight:700;color:var(--gray-900);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em}.config-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.timeline-generator .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.timeline-generator .section-header h3{margin:0}.timeline-generator .add-item-btn{display:flex;align-items:center;gap:.375rem;background:var(--info-color);color:var(--white);border:none;padding:.375rem .75rem;border-radius:6px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease}.timeline-generator .add-item-btn:hover{background:#2563eb}.timeline-generator .presets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.timeline-generator .preset-btn{background:#94a3b81a;border:1px solid rgba(148,163,184,.2);color:var(--gray-200);padding:.5rem;border-radius:6px;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease}.timeline-generator .preset-btn:hover{background:#94a3b833;border-color:#94a3b84d}.timeline-generator .preset-btn.active{background:var(--info-color);border-color:var(--info-color);color:var(--white)}.timeline-generator .items-list{display:flex;flex-direction:column;gap:.75rem;max-height:300px;overflow-y:auto}.timeline-generator .item-card{background:#0f172a80;border:1px solid rgba(148,163,184,.1);border-radius:8px;padding:.75rem;transition:all .2s ease}.timeline-generator .item-card.editing{border-color:var(--info-color);background:#3b82f61a}.timeline-generator .item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.timeline-generator .item-number{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--info-color);color:var(--white);font-size:.75rem;font-weight:600;border-radius:50%}.timeline-generator .item-actions{display:flex;gap:.25rem}.timeline-generator .item-action-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#94a3b81a;border:none;border-radius:4px;color:var(--gray-400);font-size:.875rem;cursor:pointer;transition:all .2s ease}.timeline-generator .item-action-btn:hover:not(:disabled){background:#94a3b833;color:var(--gray-200)}.timeline-generator .item-action-btn:disabled{opacity:.3;cursor:not-allowed}.timeline-generator .item-action-btn.edit:hover{background:#3b82f633;color:#60a5fa}.timeline-generator .item-action-btn.delete:hover:not(:disabled){background:#ef444433;color:#f87171}.timeline-generator .item-preview{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.timeline-generator .item-preview strong{color:var(--gray-200);font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline-generator .item-date{color:var(--gray-500);font-size:.75rem;flex-shrink:0}.timeline-generator .item-edit-form{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(148,163,184,.1);display:flex;flex-direction:column;gap:.75rem}.timeline-generator .form-row label{display:block;color:var(--gray-400);font-size:.75rem;margin-bottom:.25rem}.timeline-generator .form-row input[type=text],.timeline-generator .form-row textarea{width:100%;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:6px;padding:.5rem .75rem;color:var(--gray-200);font-size:.875rem;font-family:inherit;resize:vertical}.timeline-generator .form-row input:focus,.timeline-generator .form-row textarea:focus{outline:none;border-color:var(--info-color)}.timeline-generator .icon-select{display:flex;flex-wrap:wrap;gap:.375rem}.timeline-generator .icon-option{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#94a3b81a;border:1px solid rgba(148,163,184,.2);border-radius:6px;color:var(--gray-200);font-size:1rem;cursor:pointer;transition:all .2s ease}.timeline-generator .icon-option:hover{background:#94a3b833}.timeline-generator .icon-option.active{background:var(--info-color);border-color:var(--info-color)}.timeline-generator .config-grid{display:grid;gap:.75rem}.timeline-generator .config-item{display:flex;flex-direction:column;gap:.375rem}.timeline-generator .config-item>label{color:var(--gray-400);font-size:.75rem}.timeline-generator .config-item select{background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:6px;padding:.5rem .75rem;color:var(--gray-200);font-size:.875rem;cursor:pointer}.timeline-generator .config-item select:focus{outline:none;border-color:var(--info-color)}.timeline-generator .config-item input[type=range]{width:100%;height:6px;background:#94a3b833;border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.timeline-generator .config-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--info-color);border-radius:50%;cursor:pointer}.timeline-generator .color-input{display:flex;gap:.5rem;align-items:center}.timeline-generator .color-input input[type=color]{width:36px;height:36px;padding:2px;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:6px;cursor:pointer}.timeline-generator .color-input input[type=text]{flex:1;background:#0f172acc;border:1px solid rgba(148,163,184,.2);border-radius:6px;padding:.5rem .75rem;color:var(--gray-200);font-size:.875rem;font-family:Monaco,Menlo,monospace}.timeline-generator .color-input input[type=text]:focus{outline:none;border-color:var(--info-color)}.timeline-generator .checkbox-item label{display:flex;align-items:center;gap:.5rem;color:var(--gray-200);font-size:.875rem;cursor:pointer}.timeline-generator .checkbox-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--info-color)}.timeline-generator .preview-panel{display:flex;flex-direction:column;gap:1.5rem}.timeline-generator .preview-header{display:flex;align-items:center;justify-content:space-between}.timeline-generator .preview-header h3{color:var(--gray-100);font-size:1rem;font-weight:600;margin:0}.timeline-generator .preview-actions{display:flex;gap:.5rem}.timeline-generator .download-btn{display:flex;align-items:center;gap:.5rem;background:var(--success);color:var(--white);border:none;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.timeline-generator .download-btn:hover{background:#059669}.timeline-generator .preview-container{background:var(--gray-50);border:2px solid #d1d5db;border-radius:12px;padding:2rem;min-height:400px;overflow:auto;box-shadow:0 1px 3px #0000001a}.timeline-generator .timeline-preview{width:100%}.timeline-generator .timeline-preview.layout-horizontal{overflow-x:auto;padding-bottom:1rem}.timeline-generator .timeline-demo{position:relative;max-width:var(--max-width);margin:0 auto}.timeline-generator .layout-horizontal .timeline-demo{display:flex;gap:var(--spacing);max-width:none}.timeline-generator .timeline-demo:before{content:"";position:absolute;top:0;bottom:0;width:var(--line-width);background:var(--line-color)}.timeline-generator .layout-vertical-left .timeline-demo:before{left:calc(var(--node-size) / 2)}.timeline-generator .layout-vertical-right .timeline-demo:before{right:calc(var(--node-size) / 2)}.timeline-generator .layout-vertical-alternating .timeline-demo:before{left:50%;transform:translate(-50%)}.timeline-generator .layout-horizontal .timeline-demo:before{top:calc(var(--node-size) / 2);left:0;right:0;width:auto;height:var(--line-width);bottom:auto}.timeline-generator .timeline-demo.line-dashed:before{background:repeating-linear-gradient(180deg,var(--line-color),var(--line-color) 8px,transparent 8px,transparent 16px)}.timeline-generator .layout-horizontal .timeline-demo.line-dashed:before{background:repeating-linear-gradient(90deg,var(--line-color),var(--line-color) 8px,transparent 8px,transparent 16px)}.timeline-generator .timeline-demo.line-dotted:before{background:repeating-linear-gradient(180deg,var(--line-color),var(--line-color) 4px,transparent 4px,transparent 12px)}.timeline-generator .layout-horizontal .timeline-demo.line-dotted:before{background:repeating-linear-gradient(90deg,var(--line-color),var(--line-color) 4px,transparent 4px,transparent 12px)}.timeline-generator .timeline-demo.line-gradient:before{background:linear-gradient(180deg,var(--node-color),transparent)}.timeline-generator .layout-horizontal .timeline-demo.line-gradient:before{background:linear-gradient(90deg,var(--node-color),transparent)}.timeline-generator .timeline-item-demo{position:relative;padding-bottom:var(--spacing)}.timeline-generator .layout-vertical-left .timeline-item-demo{padding-left:calc(var(--node-size) + 20px)}.timeline-generator .layout-vertical-right .timeline-item-demo{padding-right:calc(var(--node-size) + 20px);text-align:right}.timeline-generator .layout-vertical-alternating .timeline-item-demo:nth-child(odd){padding-right:calc(50% + 20px);text-align:right}.timeline-generator .layout-vertical-alternating .timeline-item-demo:nth-child(2n){padding-left:calc(50% + 20px);text-align:left}.timeline-generator .layout-horizontal .timeline-item-demo{flex:0 0 auto;width:var(--max-width);padding-top:calc(var(--node-size) + 20px);padding-bottom:0}.timeline-generator .node-demo{position:absolute;width:var(--node-size);height:var(--node-size);background:var(--node-color);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:calc(var(--node-size) * .5);z-index:1}.timeline-generator .node-demo.circle,.timeline-generator .node-demo.icon{border-radius:50%}.timeline-generator .node-demo.square{border-radius:2px}.timeline-generator .node-demo.diamond{transform:rotate(45deg)}.timeline-generator .layout-vertical-left .node-demo{left:0;top:0}.timeline-generator .layout-vertical-right .node-demo{right:0;top:0}.timeline-generator .layout-vertical-alternating .node-demo{left:50%;top:0;transform:translate(-50%)}.timeline-generator .layout-vertical-alternating .node-demo.diamond{transform:translate(-50%) rotate(45deg)}.timeline-generator .layout-horizontal .node-demo{left:50%;top:0;transform:translate(-50%)}.timeline-generator .connector-demo{position:absolute;background:var(--line-color)}.timeline-generator .layout-vertical-left .connector-demo,.timeline-generator .layout-vertical-right .connector-demo,.timeline-generator .layout-vertical-alternating .connector-demo{width:20px;height:var(--line-width);top:calc(var(--node-size) / 2)}.timeline-generator .layout-vertical-left .connector-demo{left:var(--node-size)}.timeline-generator .layout-vertical-right .connector-demo{right:var(--node-size)}.timeline-generator .layout-vertical-alternating .timeline-item-demo:nth-child(odd) .connector-demo{right:calc(50% - 20px);left:auto}.timeline-generator .layout-vertical-alternating .timeline-item-demo:nth-child(2n) .connector-demo{left:calc(50% - 20px)}.timeline-generator .connector-demo.arrow:after{content:"";position:absolute;border-top:5px solid transparent;border-bottom:5px solid transparent}.timeline-generator .layout-vertical-left .connector-demo.arrow:after{right:-1px;top:-4px;border-left:8px solid var(--line-color)}.timeline-generator .content-demo{position:relative}.timeline-generator .content-demo.elevated{background:var(--card-bg);border-radius:var(--card-radius);padding:16px 20px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.timeline-generator .content-demo.bordered{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:16px 20px}.timeline-generator .content-demo.filled{background:var(--card-bg);border-radius:var(--card-radius);padding:16px 20px}.timeline-generator .content-demo.minimal{padding:8px 0}.timeline-generator .date-badge{display:inline-block;color:var(--white);padding:4px 12px;border-radius:9999px;font-size:.75rem;font-weight:500;margin-bottom:8px}.timeline-generator .date-above{display:block;color:var(--date-color);font-size:.875rem;font-weight:500;margin-bottom:4px}.timeline-generator .date-inline{color:var(--date-color);font-size:.875rem;font-weight:500;margin-right:8px}.timeline-generator .title-demo{color:var(--title-color);font-size:1.125rem;font-weight:600;margin:0 0 8px}.timeline-generator .desc-demo{color:var(--desc-color);font-size:.9375rem;line-height:1.6;margin:0}.timeline-generator .animate-fade-up{animation:timelineFadeUp .6s ease forwards;opacity:0}.timeline-generator .animate-fade-in{animation:timelineFadeIn .6s ease forwards;opacity:0}.timeline-generator .animate-slide-in{animation:timelineSlideIn .6s ease forwards;opacity:0}.timeline-generator .animate-scale-in{animation:timelineScaleIn .6s ease forwards;opacity:0}@keyframes timelineFadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes timelineFadeIn{0%{opacity:0}to{opacity:1}}@keyframes timelineSlideIn{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes timelineScaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.timeline-generator .code-output{background:#1e293b80;border:1px solid rgba(148,163,184,.1);border-radius:12px;padding:1.25rem}.timeline-generator .code-tabs h3{color:var(--gray-100);font-size:.875rem;font-weight:600;margin:0 0 1rem;text-transform:uppercase;letter-spacing:.05em}.timeline-generator .code-section{margin-bottom:1rem}.timeline-generator .code-section:last-child{margin-bottom:0}.timeline-generator .code-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.timeline-generator .code-header span{color:var(--gray-400);font-size:.75rem;font-weight:600;text-transform:uppercase}.timeline-generator .copy-btn{background:#94a3b81a;border:1px solid rgba(148,163,184,.2);color:var(--gray-200);padding:.25rem .75rem;border-radius:4px;font-size:.75rem;cursor:pointer;transition:all .2s ease}.timeline-generator .copy-btn:hover{background:#94a3b833}.timeline-generator .copy-btn.copied{background:var(--success);border-color:var(--success);color:var(--white)}.timeline-generator .code-block{background:#0f172acc;border:1px solid rgba(148,163,184,.1);border-radius:8px;padding:1rem;overflow-x:auto;margin:0;max-height:300px}.timeline-generator .code-block code{color:var(--gray-200);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.75rem;line-height:1.6;white-space:pre}@media (max-width: 768px){.timeline-generator{padding:1rem}.timeline-generator .tool-header h1{font-size:1.75rem}.timeline-generator .presets-grid{grid-template-columns:repeat(2,1fr)}.timeline-generator .preview-container{padding:0;border:2px solid #d1d5db;padding:1rem;background:#f9fafb;box-shadow:0 1px 3px #0000001a}}