body {
            background: #0F0F0F;
            color: #fff;
            font-family: 'Outfit', sans-serif;
        }

        #map {
            height: 100%;
            width: 100%;
        }

        .leaflet-popup-content-wrapper {
            background: #1E1E1E;
            color: #fff;
            border: 1px solid #374151;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }

        .leaflet-popup-tip {
            background: #1E1E1E;
        }

        .leaflet-popup-close-button {
            color: #9CA3AF !important;
        }

        #earthquake-list::-webkit-scrollbar {
            width: 3px;
        }

        #earthquake-list::-webkit-scrollbar-track {
            background: transparent;
        }

        #earthquake-list::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        
        #earthquake-list::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        .shimmer {
            background: linear-gradient(90deg, #1E1E1E 25%, #2a2a2a 50%, #1E1E1E 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        .live-dot {
            width: 8px;
            height: 8px;
            background: #EF4444;
            border-radius: 50%;
            display: inline-block;
            animation: pulse-dot 2s infinite;
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }