* {
       scrollbar-width: thin;
       scrollbar-color: #94a3b8 transparent
   }

   ::-webkit-scrollbar {
       width: 6px;
       height: 6px
   }

   ::-webkit-scrollbar-track {
       background: transparent
   }

   ::-webkit-scrollbar-thumb {
       background: #94a3b8;
       border-radius: 3px
   }

   .dark ::-webkit-scrollbar-thumb {
       background: #475569
   }

   body {
       font-family: 'Inter', sans-serif
   }

   .font-jakarta {
       font-family: 'Plus Jakarta Sans', sans-serif
   }

   .sidebar-link {
       transition: all .2s ease
   }

   .sidebar-link:hover {
       background: rgba(59, 130, 246, 0.08)
   }

   .sidebar-link.active {
       background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
       color: #3b82f6;
       border-right: 3px solid #3b82f6
   }

   .dark .sidebar-link:hover {
       background: rgba(59, 130, 246, 0.15)
   }

   .dark .sidebar-link.active {
       background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1))
   }

   .kpi-card {
       transition: all .3s ease
   }

   .kpi-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15)
   }

   .dark .kpi-card:hover {
       box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4)
   }

   .status-badge {
       font-size: .7rem;
       padding: .2rem .6rem;
       border-radius: 9999px;
       font-weight: 600;
       white-space: nowrap
   }

   .toast-enter {
       animation: toastIn .4s ease
   }

   .toast-exit {
       animation: toastOut .3s ease forwards
   }

   @keyframes toastIn {
       from {
           transform: translateX(100%);
           opacity: 0
       }

       to {
           transform: translateX(0);
           opacity: 1
       }
   }

   @keyframes toastOut {
       from {
           transform: translateX(0);
           opacity: 1
       }

       to {
           transform: translateX(100%);
           opacity: 0
       }
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(16px)
       }

       to {
           opacity: 1;
           transform: translateY(0)
       }
   }

   .fade-in-up {
       animation: fadeInUp .5s ease forwards
   }

   .fade-in-up-d1 {
       animation-delay: .05s;
       opacity: 0
   }

   .fade-in-up-d2 {
       animation-delay: .1s;
       opacity: 0
   }

   .fade-in-up-d3 {
       animation-delay: .15s;
       opacity: 0
   }

   .fade-in-up-d4 {
       animation-delay: .2s;
       opacity: 0
   }

   @keyframes pulseDot {

       0%,
       100% {
           opacity: 1
       }

       50% {
           opacity: .4
       }
   }

   .pulse-dot {
       animation: pulseDot 2s ease-in-out infinite
   }

   .dropdown-panel {
       transform: scale(.95);
       opacity: 0;
       pointer-events: none;
       transition: all .2s ease
   }

   .dropdown-panel.open {
       transform: scale(1);
       opacity: 1;
       pointer-events: auto
   }

   .modal-overlay {
       opacity: 0;
       pointer-events: none;
       transition: opacity .3s ease
   }

   .modal-overlay.open {
       opacity: 1;
       pointer-events: auto
   }

   .modal-content {
       transform: scale(.95) translateY(10px);
       transition: transform .3s ease
   }

   .modal-overlay.open .modal-content {
       transform: scale(1) translateY(0)
   }

   @media(max-width:1023px) {
       .sidebar {
           transform: translateX(-100%);
           transition: transform .3s ease
       }

       .sidebar.open {
           transform: translateX(0)
       }
   }

   .overlay {
       opacity: 0;
       pointer-events: none;
       transition: opacity .3s ease
   }

   .overlay.open {
       opacity: 1;
       pointer-events: auto
   }

   .tab-btn {
       transition: all .2s ease;
       cursor: pointer
   }

   .tab-btn.active {
       background: white;
       color: #2563eb;
       box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
   }

   .dark .tab-btn.active {
       background: #334155;
       color: #60a5fa
   }

   .action-btn {
       transition: all .15s ease;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       justify-content: center
   }

   .action-btn:hover {
       transform: scale(1.1)
   }

   .view-btn {
       transition: all .2s ease;
       cursor: pointer
   }

   .view-btn.active {
       background: #3b82f6;
       color: white
   }

   .route-card {
       transition: all .3s ease;
       cursor: pointer;
       border: 2px solid transparent
   }

   .route-card:hover {
       border-color: rgba(59, 130, 246, .3);
       transform: translateY(-2px);
       box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .12)
   }

   .route-card.selected {
       border-color: #3b82f6;
       background: rgba(59, 130, 246, .04)
   }

   .dark .route-card.selected {
       background: rgba(59, 130, 246, .1)
   }

   #routesMap {
       z-index: 1
   }

   .leaflet-container {
       font-family: 'Inter', sans-serif
   }

   .custom-marker {
       background: none;
       border: none
   }

   .marker-pin {
       width: 32px;
       height: 32px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
       color: white;
       font-size: 14px;
       font-weight: 700;
       position: relative
   }

   .marker-pin::after {
       content: '';
       position: absolute;
       bottom: -6px;
       left: 50%;
       transform: translateX(-50%);
       width: 0;
       height: 0;
       border-left: 6px solid transparent;
       border-right: 6px solid transparent
   }

   .marker-pin.start {
       background: #10b981
   }

   .marker-pin.start::after {
       border-top: 8px solid #10b981
   }

   .marker-pin.end {
       background: #ef4444
   }

   .marker-pin.end::after {
       border-top: 8px solid #ef4444
   }

   .marker-pin.stop {
       background: #3b82f6;
       width: 24px;
       height: 24px;
       font-size: 11px
   }

   .marker-pin.stop::after {
       border-top: 6px solid #3b82f6
   }

   .marker-pin.hub {
       background: #8b5cf6;
       width: 34px;
       height: 34px
   }

   .marker-pin.hub::after {
       border-top: 8px solid #8b5cf6
   }

   .progress-ring {
       transform: rotate(-90deg)
   }

   @media(prefers-reduced-motion:reduce) {

       *,
       *::before,
       *::after {
           animation-duration: .01ms !important;
           transition-duration: .01ms !important
       }
   }