* {
       margin: 0;
       padding: 0;
       box-sizing: border-box
   }

   html {
       overflow-x: hidden
   }

   body {
       font-family: 'Plus Jakarta Sans', sans-serif;
       overflow-x: hidden
   }

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

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

   ::-webkit-scrollbar-thumb {
       background: rgba(148, 163, 184, 0.3);
       border-radius: 3px
   }

   .dark ::-webkit-scrollbar-thumb {
       background: rgba(71, 85, 105, 0.5)
   }

   .sidebar-nav {
       overflow-y: auto;
       overflow-x: hidden;
       scrollbar-width: none;
       -ms-overflow-style: none
   }

   .sidebar-nav::-webkit-scrollbar {
       width: 0;
       display: none
   }

   .card-premium {
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
   }

   .card-premium:hover {
       transform: translateY(-4px);
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1)
   }

   .dark .card-premium:hover {
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4)
   }

   .status-online {
       animation: statusPulse 2s ease-in-out infinite
   }

   @keyframes statusPulse {

       0%,
       100% {
           box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4)
       }

       50% {
           box-shadow: 0 0 0 8px rgba(16, 185, 129, 0)
       }
   }

   .menu-active {
       background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(14, 165, 233, 0.1));
       border-right: 3px solid #10b981;
       color: #059669
   }

   .dark .menu-active {
       background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(14, 165, 233, 0.15));
       color: #34d399
   }

   .badge-pulse {
       animation: badgePulse 2s ease-in-out infinite
   }

   @keyframes badgePulse {

       0%,
       100% {
           transform: scale(1)
       }

       50% {
           transform: scale(1.15)
       }
   }

   .progress-animated {
       transition: width 1.5s ease-in-out
   }

   .table-responsive {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch
   }

   .table-responsive::-webkit-scrollbar {
       height: 4px
   }

   .sidebar-overlay {
       background: rgba(0, 0, 0, 0.5);
       backdrop-filter: blur(4px)
   }

   .toast-container {
       position: fixed;
       top: 1rem;
       right: 1rem;
       z-index: 99999;
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
       pointer-events: none
   }

   .toast-container>* {
       pointer-events: auto
   }

   .dropdown-panel {
       position: absolute;
       right: 0;
       margin-top: 0.5rem
   }

   @media (max-width: 640px) {
       .dropdown-panel {
           position: fixed !important;
           top: 4.25rem !important;
           left: 0.5rem !important;
           right: 0.5rem !important;
           margin-top: 0 !important;
           width: auto !important;
           max-width: none !important;
           max-height: calc(100vh - 5rem) !important;
           overflow-y: auto !important;
       }
   }

   @media (max-width: 480px) {
       .toast-container {
           top: 0.5rem !important;
           right: 0.5rem !important;
           left: 0.5rem !important;
       }

       .toast-container>* {
           min-width: 0 !important;
           max-width: 100% !important;
           width: 100%;
       }
   }

   .station-map-bg {
       background-image: linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
       background-size: 40px 40px;
       background-color: #f0fdf4;
   }

   .dark .station-map-bg {
       background-image: linear-gradient(rgba(16, 185, 129, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 185, 129, 0.1) 1px, transparent 1px);
       background-color: #0a1f14;
   }

   .map-pin {
       position: absolute;
       transform: translate(-50%, -100%);
       cursor: pointer;
       transition: all 0.3s;
   }

   .map-pin:hover {
       transform: translate(-50%, -105%) scale(1.1);
       z-index: 10;
   }

   .filter-pill.active {
       background: linear-gradient(135deg, #10b981, #059669);
       color: white;
       border-color: transparent;
   }

   .view-btn.active {
       background: white;
       color: #059669;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   }

   .dark .view-btn.active {
       background: #334155;
       color: #34d399;
   }