/* Modern CSS for HIV Care Cascade Database */
        :root {
            --primary-blue: #2B6CB0;
            --primary-teal: #38B2AC;
            --secondary-blue: #4299E1;
            --success-green: #68D391;
            --warning-orange: #F6AD55;
            --gray-50: #F7FAFC;
            --gray-100: #EDF2F7;
            --gray-800: #2D3748;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--gray-800);
            background-color: var(--gray-50);
        }
        
        .hero {
            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-teal) 100%);
            color: white;
            padding: 4rem 0;
        }
        
        .stat-card {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
            transition: transform 0.2s;
        }
        
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        .trial-card {
            border: 1px solid var(--gray-100);
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1rem;
            transition: all 0.2s;
        }
        
        .trial-card:hover {
            border-color: var(--primary-blue);
            box-shadow: 0 4px 6px -1px rgba(43, 108, 176, 0.1);
        }
        
        .filter-chip {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            background-color: var(--gray-100);
            border-radius: 9999px;
            font-size: 0.875rem;
            margin: 0.25rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .filter-chip:hover {
            background-color: var(--primary-blue);
            color: white;
        }
        
        /* Responsive design */
        @media (max-width: 768px) {
            .container {
                padding-left: 1rem;
                padding-right: 1rem;
            }
            
            .hero {
                padding: 2rem 0;
            }
        }
        
        /* Chart containers */
        .chart-container {
            width: 100%;
            height: 400px;
            min-height: 400px;
        }
        
        .chart-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }