:root {
            --ocean-blue: #0077be;
            --ocean-dark: #004d7a;
            --sea-foam: #7dd3c0;
        }
        .bg-ocean-blue { background-color: var(--ocean-blue); }
        .bg-ocean-dark { background-color: var(--ocean-dark); }
        .text-ocean-blue { color: var(--ocean-blue); }
        .text-ocean-dark { color: var(--ocean-dark); }
        
        #map { 
            height: 70vh; 
            min-height: 500px; 
        }
        
        .boat-card {
            border: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .boat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        
        .boat-image {
            height: 200px;
            object-fit: cover;
        }
        
        .filter-section {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
        }
        
        .leaflet-popup-content {
            width: 250px !important;
        }
        
        .popup-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        
        .stats-badge {
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
        }