/* Critical above-the-fold styles */
        .properties-container {
            display: block;
            min-height: 600px; /* Prevent layout shift */
        }
        .filter-controls {
            visibility: visible;
            min-height: 80px; /* Reserve space */
        }
        .properties-table {
            min-height: 400px; /* Prevent layout shift */
            width: 100%;
        }
        .loading-skeleton {
            display: block;
            animation: pulse 1.5s ease-in-out infinite;
        }
        .skeleton-row {
            height: 40px;
            margin: 8px 0;
            background: #f0f0f0;
            border-radius: 4px;
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }

        @media (min-width: 769px) {
            .mobile-menu-overlay,
            .mobile-menu,
            .hamburger-menu-trigger {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
                position: absolute !important;
                left: -9999px !important;
            }
        }

        body {
            font-family: var(--hh-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
            background: var(--hh-color-base-offWhite, #f8f9fa);
        }
        
        .navbar {
            background: var(--hh-color-base-white) !important;
            border-bottom: 1px solid var(--hh-color-borders-default) !important;
            padding: var(--hh-space-md) 0 !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 1000 !important;
            box-shadow: var(--hh-shadow-sm) !important;
            border-radius: 0 !important;
            margin-bottom: 0 !important;
        }
        
        .navbar-container {
            max-width: 1200px !important;
            margin: 0 auto !important;
            padding: 0 var(--hh-space-xl) !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            width: 100% !important;
        }
        
        .navbar-brand {
            font-size: var(--hh-type-h4-size) !important;
            font-weight: var(--hh-type-h4-weight) !important;
            color: var(--hh-color-text-primary) !important;
            text-decoration: none !important;
            display: flex !important;
            align-items: center !important;
            gap: var(--hh-space-sm) !important;
            margin-right: auto !important;
            flex-shrink: 0 !important;
        }
        
        .navbar-brand img {
            width: 40px !important;
            height: 40px !important;
        }
        
        .navbar-nav {
            display: flex !important;
            flex-direction: row !important;
            gap: 24px !important;
            align-items: center !important;
            margin-left: auto !important;
            margin-bottom: 0 !important;
            list-style: none !important;
            padding-left: 0 !important;
        }
        
        .nav-link {
            color: var(--hh-color-text-secondary) !important;
            text-decoration: none !important;
            font-weight: var(--hh-type-small-weight) !important;
            font-size: var(--hh-type-small-size) !important;
            padding: var(--hh-space-sm) var(--hh-space-md) !important;
            border-radius: var(--hh-radius-sm) !important;
            transition: all 0.2s ease !important;
        }
        
        .nav-link:hover {
            color: var(--hh-color-text-primary) !important;
            background: var(--hh-color-base-cloud) !important;
        }
        
        .nav-link.active {
            color: var(--hh-color-text-primary) !important;
            background: var(--hh-color-base-cloud) !important;
        }
        
        .token-counter {
            display: flex !important;
            align-items: center !important;
            gap: var(--hh-space-sm) !important;
            background: var(--hh-color-base-cloud) !important;
            color: var(--hh-color-text-primary) !important;
            padding: var(--hh-space-sm) var(--hh-space-lg) !important;
            border-radius: var(--hh-radius-full) !important;
            font-size: var(--hh-type-small-size) !important;
            font-weight: var(--hh-type-h4-weight) !important;
            border: 2px solid transparent !important;
            transition: all 0.2s ease !important;
            text-decoration: none !important;
            cursor: pointer !important;
        }
        
        .token-counter:hover {
            background: var(--hh-color-borders-strong) !important;
            border-color: var(--hh-color-brand-primary) !important;
            color: var(--hh-color-brand-primary) !important;
            text-decoration: none !important;
        }
        
        .token-counter.low {
            background: var(--hh-color-status-error) !important;
            border-color: var(--hh-color-status-error) !important;
            color: var(--hh-color-text-inverse) !important;
        }
        
        .token-icon {
            width: 32px !important;
            height: 32px !important;
            object-fit: contain !important;
        }
        
        .auth-buttons {
            display: flex !important;
            gap: 12px !important;
            align-items: center !important;
        }
        
        .login-btn, .logout-btn {
            padding: var(--hh-space-sm) var(--hh-space-lg) !important;
            border-radius: var(--hh-radius-sm) !important;
            font-size: var(--hh-type-small-size) !important;
            font-weight: var(--hh-type-h4-weight) !important;
            text-decoration: none !important;
            border: none !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
        }
        
        .login-btn {
            background: var(--hh-color-brand-slate) !important;
            color: var(--hh-color-text-inverse) !important;
        }
        
        .login-btn:hover {
            background: var(--hh-color-brand-slate-800) !important;
        }
        
        .logout-btn {
            background: var(--hh-color-base-cloud) !important;
            color: var(--hh-color-text-primary) !important;
        }
        
        .logout-btn:hover {
            background: var(--hh-color-borders-strong) !important;
        }
        
        
        .btn-outline-primary {
            border-color: var(--hh-color-brand-primary);
            color: var(--hh-color-brand-primary);
        }
        
        .btn-outline-primary:hover {
            background: var(--hh-color-brand-primary);
            border-color: var(--hh-color-brand-primary);
            color: var(--hh-color-text-inverse);
        }
        
        .table-card {
            background: var(--hh-color-base-white);
            border-radius: var(--hh-radius-md);
            border: 1px solid var(--hh-color-borders-default);
            overflow: hidden;
            box-shadow: var(--hh-shadow-sm);
        }
        
        .table-header {
            background: var(--hh-color-base-cloud);
            padding: var(--hh-space-lg) var(--hh-space-xl);
            border-bottom: 1px solid var(--hh-color-borders-default);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .table-responsive {
            border-radius: 0 0 12px 12px;
        }
        
        .price-cell {
            font-weight: var(--hh-type-h4-weight);
            color: var(--hh-color-status-success);
        }
        
        .address-cell {
            font-weight: var(--hh-type-h4-weight);
            color: var(--hh-color-status-info);
            cursor: pointer;
        }
        
        .address-cell:hover {
            text-decoration: underline;
        }
        
        .badge-custom {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
        
        .btn-export {
            background: var(--hh-color-brand-sage);
            border-color: var(--hh-color-brand-sage);
            color: var(--hh-color-text-inverse);
        }
        
        .btn-export:hover {
            background: var(--hh-color-brand-sage-700);
            border-color: var(--hh-color-brand-sage-700);
            color: var(--hh-color-text-inverse);
        }

        /* DataTables pagination styling - Force brand colors with maximum specificity */
        .dataTables_wrapper .dataTables_paginate .paginate_button,
        .dataTables_wrapper .dataTables_paginate .paginate_button a,
        .paginate_button,
        .paginate_button a,
        table.dataTable tbody tr.selected a {
            border: 1px solid #3D405B !important;
            background: transparent !important;
            background-color: transparent !important;
            color: #3D405B !important;
            text-decoration: none !important;
            transition: all 0.2s ease !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
        .dataTables_wrapper .dataTables_paginate .paginate_button a:hover,
        .paginate_button:hover,
        .paginate_button a:hover {
            background: #3D405B !important;
            background-color: #3D405B !important;
            color: #FFFFFF !important;
            border-color: #3D405B !important;
            text-decoration: none !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current a,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover a,
        .paginate_button.current,
        .paginate_button.current a,
        .paginate_button.current:hover,
        .paginate_button.current:hover a {
            background: #3D405B !important;
            background-color: #3D405B !important;
            color: #FFFFFF !important;
            border-color: #3D405B !important;
            font-weight: 600 !important;
            text-decoration: none !important;
        }

        /* Override any DataTables Bootstrap integration */
        .dataTables_wrapper .dataTables_paginate .pagination .page-link {
            border: 1px solid #3D405B !important;
            background: transparent !important;
            color: #3D405B !important;
            text-decoration: none !important;
        }
        
        .dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
            background: #3D405B !important;
            color: #FFFFFF !important;
            border-color: #3D405B !important;
            text-decoration: none !important;
        }
        
        .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
            background: #3D405B !important;
            color: #FFFFFF !important;
            border-color: #3D405B !important;
            font-weight: 600 !important;
        }
        
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter,
        .dataTables_wrapper .dataTables_info,
        .dataTables_wrapper .dataTables_paginate {
            margin: 1rem;
        }
        
        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #ced4da;
            border-radius: 6px;
            padding: 0.375rem 0.75rem;
        }
        
        #propertyTable thead th {
            background: var(--hh-color-base-cloud);
            border-top: none;
            font-weight: var(--hh-type-h4-weight);
            color: var(--hh-color-text-secondary);
            font-size: var(--hh-type-helper-size);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            white-space: nowrap;
            padding: var(--hh-space-md) var(--hh-space-sm);
            vertical-align: middle;
        }
        
        #propertyTable {
            table-layout: fixed;
            width: 100%;
        }
        
        #propertyTable th:nth-child(1) { width: 22%; } /* Address */
        #propertyTable th:nth-child(2) { width: 9%; } /* Price */
        #propertyTable th:nth-child(3) { width: 7%; }  /* Beds/Baths */
        #propertyTable th:nth-child(4) { width: 7%; }  /* Sq Ft */
        #propertyTable th:nth-child(5) { width: 9%; } /* Investment */
        #propertyTable th:nth-child(6) { width: 9%; } /* Renovation */
        #propertyTable th:nth-child(7) { width: 9%; } /* NPV */
        #propertyTable th:nth-child(8) { width: 9%; } /* Cash-on-Cash */
        #propertyTable th:nth-child(9) { width: 6%; }  /* IRR */
        #propertyTable th:nth-child(10) { width: 7%; } /* Versions */
        #propertyTable th:nth-child(11) { width: 7%; }  /* Analyzed */
        #propertyTable th:nth-child(12) { width: 5%; } /* Actions */
        
        #propertyTable td {
            padding: 8px;
            vertical-align: middle;
            font-size: 0.9rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        #propertyTable td:first-child {
            white-space: normal;
            word-wrap: break-word;
        }
        
        
        /* Responsive navbar */
        @media (max-width: 768px) {
            .navbar-container {
                padding: 0 var(--hh-space-lg);
            }
            
            .navbar-nav {
                flex-direction: row !important;
                gap: var(--hh-space-md) !important;
            }
            
            .nav-link {
                font-size: var(--hh-type-helper-size) !important;
                padding: var(--hh-space-xs) var(--hh-space-sm) !important;
            }
            
            .navbar-brand {
                font-size: var(--hh-type-body-size) !important;
            }
        }