.agent-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
        border-color: #0055AA;
        box-shadow: 0 8px 24px rgba(0, 85, 170, 0.12);
        transform: translateY(-4px);
    }
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
        
        .agent-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            overflow: hidden;
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    
    .agent-name {
        font-size: 17px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 8px;
    }
    
    .agent-desc {
        font-size: 13px;
        color: #6b7280;
        line-height: 1.6;
        margin-bottom: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 40px;
    }
    
    .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .usage-count {
            font-size: 12px;
            color: #9ca3af;
        }
    }
}
