:root {
      --color-primary: #3b5449;
      --color-secondary: #8a9a93;
      --color-accent: #e86f32;
      --color-background: #f8f5f2;
      --color-text: #2d3748;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--color-background);
      color: var(--color-text);
    }
    
    .timeline-container {
      scroll-behavior: smooth;
    }
    
    .day-card {
      border-left: 4px solid var(--color-primary);
      transition: all 0.3s ease;
    }
    
    .day-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    .day-card.active {
      border-left: 4px solid var(--color-accent);
    }
    
    .section-header {
      border-bottom: 2px solid var(--color-secondary);
    }
    .item-description{
      height: 100px;
    }
    .list-item {
      border-left: 3px solid transparent;
      transition: all 0.2s ease;
    }
    
    .list-item:hover {
      border-left: 3px solid var(--color-accent);
      background-color: rgba(232, 111, 50, 0.05);
    }
    
    .btn-primary {
      background-color: var(--color-primary);
      color: white;
      transition: all 0.2s ease;
    }
    
    .btn-primary:hover {
      background-color: #2d4339;
    }
    
    .btn-accent {
      background-color: var(--color-accent);
      color: white;
      transition: all 0.2s ease;
    }
    
    .btn-accent:hover {
      background-color: #d25f25;
    }
    
    .btn-secondary {
      background-color: var(--color-secondary);
      color: white;
      transition: all 0.2s ease;
    }
    
    .btn-secondary:hover {
      background-color: #798a82;
    }
    
    .loader {
      border: 4px solid rgba(0, 0, 0, 0.1);
      border-left: 4px solid var(--color-accent);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .floating-button {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
    
    .floating-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    }
    
    .drag-handle {
      cursor: grab;
    }
    
    .drag-handle:active {
      cursor: grabbing;
    }
    
    .sortable-ghost {
      opacity: 0.5;
    }
    
    @media (max-width: 640px) {
      .timeline-days {
        flex-direction: column;
      }
    }
    
    .flatpickr-calendar {
      border-radius: 8px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }